.cardSection {

  width: 100%;

  padding-block: 70px;

  background-color: #f4efe7;

}



.cardSection .title {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 400;

  font-size: 50px;

  line-height: 65px;

  text-align: center;

  color: #142927;

}



.cardSection .title .spanMore {

  font-family:  var(--font-moisette);

  font-weight: 500;

  font-size: 50px;

  line-height: 65px;

  text-align: center;

}



.cardSection .cardBox {

  display: flex;

  gap: 40px;

  padding-top: 70px;

}



.cardSection .cardBox .box img {

  width: 100%;

  max-width: 305px;

  min-height: 352px;

  object-fit: cover;
  margin-bottom: 24px !important;
}



.cardSection .cardBox .box .link {

  display: flex;

  align-items: center;

  gap: 11px;

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 400;

  font-size: 16px;

  line-height: 36px;

  text-decoration: underline;

  color: #142927;

  margin: 0;

  height: 0px;

  padding-top: 24px;

}



.cardSection .cardBox .box .link img {

  width: 10px;

  height: 10px;

  object-fit: contain;

}



@media only screen and (max-width: 767.9px) {

  .cardSection .title {

    font-size: 40px;

    line-height: 50px;

    text-align: left;

  }

  .cardSection .container {

    padding-inline: 15px;

  }



  .cardSection .cardBox {

    flex-direction: column;

    padding-top: 50px;

  }



  .cardSection .cardBox .box img {

    max-width: unset;

    min-height: unset;
    margin-bottom: 18px  !important;

  }



  .cardSection .cardBox {

    gap: 50px;

  }



}