/* Global */
html {overflow-x: hidden !important;}
h1, h2, h3, .banner-content p{margin: 0;}
h2{font-size: clamp(1.5em, 2vw, 2.5em);}
/* End */

.principal .divisor {
  height: 100%;
  border-left: 2px solid white;
}

.article-banner{height: 100vh;}
.dynamic-banner {position: relative;}

.fill:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  content: "";
  height: 100vh;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}

.video-banner {
  width: 100%;
  height: 100vh;
  position: relative;
  object-fit: cover;
  background-size: 100% 100%;
  background-position: center center;
}

.responsive-banner {display: none !important;}

.banner-content{
  top: 0;
  left: 0;
  gap: 15px;
  bottom: 0;
  z-index: 5;
  right: 30em;
  display: flex;
  margin: 0 auto;
  padding: 0 91px;
  position: absolute;
  max-width: 1300px;
  flex-direction: column;
  justify-content: center;
}

.category {
  gap: 15px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
}

.category span{
  padding: 3px 15px;
  border-radius: 8px;
  text-transform: capitalize;
  background-color: #be0027;
  font-size: clamp(0.7em, 1.8vw, 1.2em);
}

.analisis{background-color: #be0027;}
.articulo{background-color: #2c9f45;}
.critica{background-color: #511378;}
.noticias{background-color: #007cc0;}
.reflexión{background-color: brown;}

.banner-content h1, .banner-content h2{
  line-height: 1;
  font-size: clamp(1.5em, 3.5vw, 4.3em);
}

.banner-content p{
  line-height: 1.1;
  font-size: clamp(0.9em, 1.7vw, 1.5em);
}

/* Nav */
.slider-nav {
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: auto;
  height: 120px;
  width: 1000px;
  border: 1px solid black;
  display: flex !important;
  background-color: black;
  border-radius: 20px 0 0 0;
  position: absolute !important;
  flex-direction: row !important;
  align-items: center !important;
}

.slider-nav .slick-slide {width: 33.3% !important;}

.slider-nav .slick-list{
  width: 100% !important;
  border-radius: 20px 0 0 0;
}

.slider-nav .slick-track {width: 100% !important;}
.slider-nav .slick-current .content-indicator {background: firebrick;}
.slider-nav .slick-current .content-indicator h3{animation: myAnim 1s ease 0s 1 normal forwards;}

@keyframes myAnim {
  0% {opacity: 0; transform: translateX(-50px);}
  100% {opacity: 1; transform: translateX(0);}
}

.content-indicator {
  display: flex;
  padding: 1em 1.5em;
  flex-direction: column;
  justify-content: center;
}

.slider-nav div {
  margin: auto;
  height: 100%;
  cursor: pointer;
  border-right: 1px solid white;
}

.slider-nav div:last-child {border: none;}

.slider-nav div img{
  width: 80%;
  height: 5.5vw;
  margin: 0 auto;
  object-fit: cover;
  border: 1px solid black;
}

.slider-nav div.slick-current img {border: 4px solid black;}

.content-indicator .divisor-title {
  width: 55%;
  margin: 10px 0 0;
  border-color: white;
  border-bottom: 3px solid white;
  transition: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.content-indicator h3{
  margin: 0;
  line-height: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: clamp(.8em, 1.7vw, 1.4em);
}

.slider-nav .slick-current .content-indicator h3:hover + hr.divisor-title{border-bottom: 3px solid black;}

.content-indicator h3:hover + hr.divisor-title {
  width: 90%;
  border-color: black;
  border-bottom: 3px solid firebrick;
}

/* Section #2 */
.recent-launch-slider{padding-left: 2.6em;}

.launch-container {
  display: flex;
/*   margin: 6em 0; */
  flex-direction: row;
  align-items: center;
}

.launch-side:first-child {width: 80%;}
.launch-side:last-child {width: 20%;}

.d-recent-card-wrapper {
  margin: 6em 1em;
  width: 12.8vw !important;
  min-width: 150px !important;
}

.recent-launch-slider .slick-track {
  gap: 4.1rem;
  display: flex;
}

.d-recent-card {
  background-size: cover;
  transition: all ease 0.28s 0.01s;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
  background: url(style.css) no-repeat transparent 50% 50%;
  transform: perspective(222px) translate3d(0px, 5px, 0px) rotateX(0deg);
  perspective-origin: top;
  z-index: 1;
  width: 100%;
  height: 19.3vw;
  min-height: 410px;
/*   height: 490px; */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: top;
}

.d-recent-card::before {
  top: 0;
  left: 0;
  content: "";
  opacity: 0.5;
  width: 100%;
  height: 172%;
  position: absolute;
  background-image: linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%);
  transform: translateY(-36%);
  transition: all ease 0.28s 0.01s;
}

.d-recent-card:hover, .d-recent-card:focus {
  border: 1px solid rgba(0, 0, 0, 0.1);
  transform: perspective(222px) translate3d(0px, 0px, 8px) rotateX(3deg);
  transform-origin: center;
  box-shadow: 0 14px 16px -2px rgba(0, 0, 0, 0.5);
}

.d-recent-card:hover::before, .d-recent-card:focus::before {
  opacity: 1;
  transform: translateY(-20%);
}

.d-recent-card:active {filter: brightness(80%) contrast(110%);}

.platforms{
  gap: 5px;
  display: flex;
  width: 100%;
  position: absolute;
  flex-direction: row;
  margin: 10px 0 0 -10px;
  justify-content: flex-end;
}

.platform-box{
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  justify-content: center;
  border: 2px solid white;
}

.platform-box i{font-size: 22px;}

.platform-box img{
  width: 22px;
  display: block;
}

.platform-box.Android{background-color: #2edf85;}
.platform-box.iOS{background-color: #3389b7;}
.platform-box.Android-iOS{background: rgb(46,223,133); background: linear-gradient(155deg, rgba(46,223,133,1) 0%, #3389b7  60%);}
.platform-box.NSwitch{background-color: #e60012;}
.platform-box.PC{background-color: #202324;}
.platform-box.PS4-PS5{background: rgb(0,48,135); background: linear-gradient(155deg, rgba(0,48,135,1) 0%, rgba(255,255,255,1) 67%); color: black;}
.platform-box.PS4{background-color: #003087;}
.platform-box.PS5{background-color: white; color: black;}
.platform-box.XO-XS{background: #005500; background: linear-gradient(155deg, #005500 0%, #52b043  67%);}
.platform-box.Xbox{background-color: #005500;}
.platform-box.XSeries{background-color: #52b043;}

.d-recent-card-wrapper .meta-data{
  width: 85%;
  margin: -25px auto 0;
}

.d-recent-card-wrapper p{
  margin: 0;
  z-index: 1;
  width: 100%;
  display: block;
  padding: 0 10px;
  overflow: hidden;
  position: relative;
  text-align: center;
  border-radius: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: maroon;
}

.d-recent-card-wrapper .release-date{
  margin: 0 auto;
  width: fit-content;
  background-color: black;
  font-size: clamp(0.6em, 1.5vw, 0.8em);
}

/* Right Side */
.gooey{
  background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  height: 15vw;
  width: 15.7vw;
  margin: 0 auto;
  padding: 0 1em;
  animation: morph 3s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}

.gooey:before, .gooey:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; 
  top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  background-image: linear-gradient(120deg, firebrick 0%, maroon 100%);
}

.gooey:before{
  animation: morph 3s linear infinite;
  opacity: .21;
  animation-duration: 1.5s;
}

.gooey:after{
  animation: morph 3s linear infinite;
  animation-delay: 400ms;
  opacity: .89;
  content: "";
}

.gooey-info{
  z-index: 2;
  display: flex;
  height: 100%;
  position: relative;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.gooey h3{
  line-height: 1;
  font-family: 'Gilroy ExtraBold';
  font-size: clamp(1.4em, 1.6vw, 2em);
}

.gooey p{
  line-height: 1;
  font-size: clamp(0.8em, 1vw, 1.1em);
}

.gooey a{
  line-height: 1;
  font-weight: bold;
  padding: 5px 2em;
  border-radius: 30px;
  background-color: black;
}

@keyframes morph{
  0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 0;
  }
}
/* End */

main{
  margin: 0 auto;
  padding: 0 4em;
  max-width: 2080px;
}

/* Section #3 */
.principal-articles {margin-bottom: 5em;}

.article-container {  
  gap: 40px;
  display: grid;
  grid-auto-flow: row;
  grid-template-areas:
    "a a a b c c";
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }

/* A Side */
.a{
  gap: 40px;
  display: flex;
  flex-direction: column;
}

.article-content {
  gap: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.article-side:first-child{width: 30%;}
.article-side:last-child{width: 70%;}

.article-categories {
  gap: 10px;
  display: flex;
  max-width: 92%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.article-side img {
  height: 9vw;
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 220px;
  border-radius: 15px;
}

.header-side:first-child {
  gap: 10px;
  display: flex;
  flex-direction: row;
}

.header-side span {
  display: block;
  font-size: 15px;
  padding: 3px 15px;
  max-width: 420px;
  border-radius: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: maroon;
  overflow: hidden !important;
}

.header-side p{
  font-weight: bold;
  padding: 3px 15px;
  border-radius: 8px;
  background-color: grey;
  text-transform: capitalize;
}

.article-core h2, .article-core p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.article-core h2{
  margin: 0;
  -webkit-line-clamp: 2;
  font-size: clamp(1.2em, 2.2vw, 2em) !important;
}

.article-core p{-webkit-line-clamp: 4;}

.article-core .share-post {
  display: flex;
  width: 300px;
  padding: 2px 15px;
  align-items: center;
  border-radius: 10px;
  min-width: fit-content;
  background-color: gray;
  justify-content: space-between;
}

i.fas.fa-star {color: gold;}
.a hr:last-child {display: none;}
hr.article-div {width: 80%;}

.see-all {
  display: block;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 8px;
  max-width: fit-content;
  background-color: maroon;
}

/* B & C Side */
.b, .c{position: relative;}
/* .a h2, .b h2, .c h2{font-size: clamp(1.5em, 2vw, 2.5em);} */
.b h2, .c h2 {margin-bottom: 0.6em;}

.sticky-bb, .sticky-cc {
  top: 6em;
  position: sticky;
}
/* End */

/* B Side */
h4.week-games {
  margin-top: 0;
  text-align: center;
  padding: 2px 10px;
  border-radius: 20px;
  border: 2px solid white;
  background-color: black;
}

.free-game{
  height: auto;
  display: block;
  transition: .5s;
  margin: 15px 0;
  position: relative;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.free-game:hover{transform: scale(0.9, 0.9);}

.free-box {
  padding: 13px 20px;
  backdrop-filter: brightness(0.55);
}

.free-box .data{
  top: 0;
  width: 100%;
  display: flex;
  height: 100%;
  position: relative;
  flex-direction: column;
  justify-content: center;
}

.free-box .data h3{
  width: 85%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: clamp(1em, 1.6vw, 1.4em);
}

.free-box .data p{margin: 0;}

.the-tags span {
  top: 0;
  right: 0;
  position: absolute;
}

.the-tags span img {
  width: 35px;
  object-fit: contain;
  height: 35px !important;
}

.the-tags span i {
  font-size: 35px;
  text-shadow: 2px 4px 20px black;
}

.free-games .article-div{margin: 35px auto;}
.free-games:last-child .article-div{display: none;}
.free-box .limit{font-size: 12px;}
.b hr.article-div{margin: 3em auto;}
.b hr.article-div:last-child {display: none;}

/* C Side */
.events{position: relative;}
.event-box {margin: 0 5px;}

.event-date {
  top: 10px;
  font-size: 14px;
  position: absolute;
  padding: 5px 10px;
  width: fit-content;
/*   margin: 0 0 0 28em; */
  border-radius: 15px;
  border: 2px solid;
  background-color: black;
}

.event-box img {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 240px;
  height: 14.5vw !important;
}

.event-box .data{padding: 20px;}
.sponsored h2{margin-bottom: 0.6em;}
/* End */

/* Categories */
.categories-recommendation {margin: 0 0 5em;}

.repository-cards{
  padding: 0;
  display: grid;
  grid-gap: 35px;
  max-width: 100vw;
  margin: 60px auto;
  justify-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14vw), 1fr));
}

a.repo-card{
  transition: .4s;
  position: relative;
}

a.repo-card:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 30px 15px rgb(0 0 0 / 25%), -5px -5px 30px 15px rgb(0 0 0 / 22%);
}

.repo-card video{
  width: 100%;
  position: relative;
  object-fit: cover;
  aspect-ratio: 2 / 1;
  border-radius: 20px;
  height: 100% !important;
  background-size: 100% 100%;
  background-position: center center;
}

.repo-card h3{
  top: -60%;
  height: auto;
  line-height: .9;
  display: block;
  margin: 0 auto;
  position: relative;
  font-weight: 700;
  max-width: 100%;
  text-align: center;
  font-size: clamp(1.3em, 2vw, 2.2em);
  text-shadow: 6px 5px 20px rgb(0 8 0);
}
/* End */

/* Responsive Mode */
@media (max-width:1920px){
  .principal-articles {margin: 0 0 5em;}
  .d-recent-card-wrapper {width: 16vw !important;}
  .recent-launch-slider .slick-track {gap: 3.6rem;}

  .gooey {
    width: 95%;
    height: 18vw;
  }

  .sticky-bb {
    height: 92vh;
    overflow-y: scroll;
    padding-bottom: 3em;
  }

  .sticky-bb::-webkit-scrollbar{display: none !important;}
}

@media (max-width:1680px){
  .recent-launch-slider .slick-track {gap: 1.1rem;}
}

@media (max-width:1600px){
  .recent-launch-slider .slick-track {gap: 2.9rem;}
  .d-recent-card {min-height: 350px;}

  .d-recent-card-wrapper .meta-data {
    width: 90%;
    margin: -30px auto 0;
}

  .release-date span {
    overflow: hidden;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .gooey {
    height: 19vw;
    margin: 0 auto;
    padding: 0 10px;
  }

  .article-container {gap: 30px;}
  .article-categories {max-width: 100%;}
  .article-side img {min-height: auto;}

  .header-side:first-child {
    overflow: hidden;
    max-width: 310px;
  }

  .header-side span, .header-side p {font-size: 13px;}
  .free-box {padding: 13px 10px;}
  .b hr.article-div {margin: 2em auto;}
}

@media (max-width:1440px){
  .banner-content {
    left: 0;
    right: inherit;
    margin: 0;
    padding: 0 90px 0 50px;
    max-width: 90vw;
  }

  .article-core p {font-size: 14px;}
  .the-tags span i {font-size: 30px;}
  .article-container {grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr 1fr;}
}

@media (max-width:1280px){
  .banner-content {right: 0;}
  .article-core span {font-size: 13px;}
}

@media (max-width:1200px){
  main {padding: 0 4vw;}
  .recent-launch-slider .slick-track {gap: 2rem;}
  .article-container {gap: 15px;}
  .launch-side:first-child {width: 75%;}
  .launch-side:last-child {width: 25%;}
  .recent-launch-slider .slick-track {gap: 1.2rem;}
  a.d-recent-card-wrapper.slick-slide.slick-current.slick-active .d-recent-card {box-shadow: #b22222 0px 13px 27px -5px, #b22222 -1px -1px 16px 6px;}
  .d-recent-card-wrapper {margin: 3em 0 4em;}
  .d-recent-card {min-height: 290px;}

  .gooey {
    width: 90%;
    height: 22vw;
  }

  h4.week-games {font-size: 14px;}
  .free-box .data h3 {width: 80%;}
  .the-tags span i {font-size: 25px;}
  .repository-cards {grid-gap: 20px;}
}

@media (max-width:1100px){
  .article-container {
    gap: 40px;
    grid-template-areas:
      "b b b b b b"
      "a a a a a a"
      "c c c c c c";
  }

  .article-side img {
    height: 21.5vw;
    min-height: 100%;
  }

  .d-recent-card-wrapper p {font-size: 12px;}

  .sticky-bb {
    height: auto;
    padding-bottom: 0;
  }
 
  .free-cards {
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  .free-game {width: max-content;}

  .the-tags span img {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 1024px){
  .banner-content {padding: 0 50px;}
  .category span {padding: 3px 15px;}

  .slider-nav {
    width: 100%;
    height: 90px;
  }

  .event-box .data {
    display: flex;
    height: 112px;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 991px){
  .the-tags {display: none;}
  .free-box .data h3 {font-size: 14px;}
}

@media (max-width: 800px){
  .article-banner, .fill:before, .video-banner {height: 60vh;}
  .launch-container {margin: 2em 0;}
  .recent-launch-slider .slick-track {gap: 1rem;}
  .launch-side:first-child {width: 70%;}
  .d-recent-card {min-height: 250px;}
  .launch-side:last-child {width: 30%;}
  .gooey {height: 27vw;}
}

@media (max-width: 700px){
  .banner-content {padding: 0 20px;}
  
  .slider-nav {
    height: 70px;
    border-bottom: 2px solid white;
  }

  .content-indicator {padding: 0 0.8em;}

  .launch-container {
    margin: 4em 0 1em;
    flex-direction: column-reverse;
  }

  .launch-side {width: 100% !important;}

  .gooey {
    height: 60vw;
    width: 70vw;
  }

  .recent-launch-slider {padding: 0 1em;}

  .recent-launch-slider .slick-track {
    gap: 0;
    justify-content: center;
  }

  .d-recent-card-wrapper {margin: 3em 1.23em 4em;}

  .platforms span {
    font-size: 10px;
    padding: 0 10px;
  }

  .slick-prev:before, .slick-next:before {
    width: 20px;
    display: block;
    height: 30px;
    content: '' !important;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .slick-prev {left: 5px !important;}
  .slick-prev:before {background-image: url('https://mxdhardware.com/wp-content/uploads/2021/12/chev-left.png');}
  .slick-next {right: 5px !important;}
  .slick-next:before {background-image: url('https://mxdhardware.com/wp-content/uploads/2021/12/chev-right.png');}
  .a {gap: 20px;}
  .article-content {gap: 0;}
  .article-side:last-child {padding: 10px;}
  .article-side img {height: 115px;}
  .header-side:first-child {gap: 5px;}

  .header-side span, .header-side p {
    font-size: 10px;
    padding: 3px 8px;
  }

  .article-core span {
    width: 100%;
    font-size: 12px;
    padding: 2px 10px;
  }

  .article-core p {
    line-height: 1.1;
    font-size: 12px;
    margin-top: 5px;
  }

  .free-cards {
    gap: 20px 10px;
    flex-wrap: wrap;
  }

  .free-cards .free-game {
    margin: 0;
    width: 48%;
  }

  .free-game:nth-child(5) {width: 100%;}
  .free-game:nth-child(5) .free-box {padding: 19px 10px;}

  .free-cards {
    gap: 20px 10px;
    flex-wrap: wrap;
  }

  .free-game {
    margin: 0;
    width: 48%;
  }

  .free-box {padding: 20px 10px;}
  .slick-dots li.slick-active button:before {color: firebrick !important;}

  .slick-dots li button:before {
    color: white !important;
    font-size: 12px !important;
  }

  .repository-cards {grid-template-columns: repeat(auto-fit, minmax(min(100%, 31%), 1fr));}
  .repo-card video {aspect-ratio: 1.5 / 1;}
}

@media (max-width: 600px){
  .article-banner, .fill:before, .video-banner, .responsive-banner {height: 55vh;}
  .video-banner {display: none;}

  .responsive-banner {
    width: 100%;
    object-fit: cover;
    display: block !important;
  }

  .d-recent-card-wrapper .meta-data {margin: -26px auto 0;}
  .d-recent-card-wrapper .release-date {width: 100%;}
  .release-date span:first-child {width: 28%;}
  .release-date span {display: inline-block;}

  .platform-box {
    width: 30px;
    height: 30px;
  }

  .platform-box img {width: 16px;}
  .platform-box i {font-size: 16px;}

  .event-date {
    font-size: 12px;
    margin-left: -10px;
  }

  .event-box .data {height: 90px;}
}

@media (max-width: 370px){
  .slick-prev, .slick-next {top: 88% !important;}
  .launch-container {margin: 3em 0 1em;}
  .d-recent-card-wrapper {margin: 3em 0.41em 4em;}
  .d-recent-card {min-height: 230px;}
  .d-recent-card-wrapper p {font-size: 11px;}
  .platforms {margin-top: 10px;}
  .platforms span {font-size: 8px;}
  .article-core span {font-size: 9px;}
  .free-box {height: 150px;}
  .event-box img {min-height: 180px;}
  .event-date {font-size: 9px;}
  
  .event-box .data {
    font-size: 13px;
    padding: 10px 20px;
  }
}