/*#region Posology calculator*/
.solution-container {
  height: 600px;
}

  .solution-container p {
    width: 45%;
  }

.solution-image {
  height: 100%;
  left: -385px;
  object-fit: cover;
}

@media (min-width: 48em) {
  .solution-image {
    left: 0px;
    object-position: center;
  }
}

@media (min-width: 62em) {
  .solution-container {
    height: 700px;
  }

    .solution-container p {
      width: 360px;
    }

  .solution-image {
    width: 100%;
  }
}
/*#endregion*/

/*#region Flip Cards*/
.flip-card {
  width: 330px;
  height: 350px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
  transform-style: preserve-3d;
}

/* Estado virado */
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-button i {
  color: var(--magenta-primary-2);
}

/* Faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

  /* Frente */
  .flip-card-front img {
    position: absolute;
    height: 100%;
    left: -50px;
  }

.card-content {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 20px 20px;
}

  .card-content h3 {
    margin-bottom: 20px;
  }

/* Verso */
.flip-card-back {
  transform: rotateY(180deg);
}

  .flip-card-back p {
    clear: both;
  }

@media (min-width: 62em) {
  .flip-card {
    width: 560px;
    height: 525px;
  }

  .flip-card-front img {
    left: -75px;
  }

  .card-content {
    padding: 42px 32px;
  }
}
/*#endregion*/

/*#region Blog List*/
#blogposts-title {
  padding-inline: 0 !important;
  font-size: 36px !important;
}

.blog-card .card-info .blog-description,
.blog-card .card-info .blog-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card .card-info .blog-description {
  -webkit-line-clamp: 2;
}

.blog-card .card-info {
  height: 218px;
}

  .blog-card .card-info .blog-title {
    height: 28px;
  }

  .blog-card .card-info .blog-description {
    height: 38px;
  }

@media (min-width: 75em) {
  #blogposts-title {
    font-size: 64px !important;
  }

  .blog-card .card-info .blog-description,
  .blog-card .card-info .blog-title {
    -webkit-line-clamp: 2;
  }

  .blog-card .card-info {
    height: 285px;
  }

    .blog-card .card-info .blog-title {
      height: 62px;
    }

    .blog-card .card-info .blog-description {
      height: 38px;
    }
}

/*#endregion*/