.page-article {
  .page-article__page-banner {
    position: relative;
    height: 23.4375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: 1rem;
    .page-article__button {
      padding: 1.12rem 1rem 0;
      position: absolute;
      top: 0;
      z-index: 10;
      width: 100%;
      .page-article--back-button {
        top: 1.12rem;
        left: 1rem;
        right: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 35px;
        height: 35px;
        background-color: var(--blue);
        border-radius: 50%;
      }
      .page-article--back-button:after {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("../icons/arrow-13403ca97cffe160efef669ea37c7694.svg");
        transform: rotate(180deg);
        margin-left: -1px;
      }
      .page-article--back-button:hover {
        background-color: var(--blue7);
      }
    }

    .page-article--banner-image {
      position: absolute;
      top: 0;
      height: 23.4375rem;
      > picture > img {
        object-fit: cover;
        width: 100vw;
        height: 23.4375rem;
      }
    }
    .page-articles--image-overlay {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 78.84%, rgba(255, 255, 255, 0) 100%);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      display: none;
    }
  }
  .page-article--article {
    padding: 0 1rem;
    margin-bottom: 3.69rem;

    .page-article--title {
      color: var(--blue8);
      font-family: var(--font-family-poppins);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0.01563rem;
      padding-bottom: 0.75rem;
    }
    .page-article--share {
      display: inline-flex;
      padding: 0.75rem 0.5rem;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      border-radius: 0 0.5rem 0.5rem 0;
      background: #fff;
      box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
      margin-bottom: 1.5rem;
      .page-article__share--share-buttons {
        display: flex;
        gap: 1rem;
        flex-direction: row;
        .share-button {
          display: flex;
          width: 1.5rem;
          height: 1.5rem;
          padding: 0.28125rem;
          justify-content: center;
          align-items: center;
          aspect-ratio: 1/1;
          border-radius: 54.63281rem;
          &.twitter {
            background: hsla(0, 0%, 24%, 1);
          }
          &.whatsapp {
            background: hsla(142, 66%, 50%, 1);
          }
          &.link {
            background: hsla(200, 90%, 45%, 1);
          }
          &.linkedin {
            background: hsla(201, 98%, 35%, 1);
          }
        }
      }
    }
    .component-cms {
      h2 {
        color: var(--dark-blue);
        font-family: var(--font-family-poppins);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 600;
        line-height: 160%; /* 2rem */
        letter-spacing: 0.00938rem;
      }
      p {
        color: var(--grey);
        text-align: justify;
        font-family: var(--font-family-poppins);
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 180%; /* 1.8rem */
        letter-spacing: 0.00938rem;
        padding-bottom: 2rem;
      }
      ul {
        padding-left: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 3.75rem;
      }
      ul > li > p {
        padding-bottom: 0 !important;
      }
      p:last-of-type {
        padding-bottom: 1.25rem;
      }
    }
    .wrapper-asset {
      height: 30.4375rem;
      > picture > img {
        width: 21.375rem;
        height: 30.4375rem;
        margin: 0 auto;
      }
    }
    .component-articles-list {
      border-top: 0.0625rem solid var(--grey6);
      padding-top: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      align-content: center;
      flex-wrap: wrap;
      .component-articles-list--header h2 {
        color: var(--grey);
        font-family: var(--font-family-poppins);
        font-size: var(--_fontSize-1rem, 1rem);
        font-style: normal;
        font-weight: 400;
        line-height: 180%; /* 1.8rem */
        letter-spacing: 0.00938rem;
        text-transform: capitalize;
      }
      .component-articles-list--articles {
        display: flex;
        justify-content: center;
        min-height: 14.125rem;
        flex-direction: column;
        gap: 1.5rem;
        .component-articles-list--article {
          display: flex;
          width: 21.4375rem;
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
          align-self: stretch;
          border-radius: 0.5rem 0.5rem 0 0;
          overflow: hidden;
          .component-articles-list--image-link {
            height: 7.125rem;
            > picture > img {
              height: auto;
            }
          }
          .component-articles-list--article-content h3 {
            color: var(--blue8);
            font-family: var(--font-family-poppins);
            font-size: 1.25rem;
            font-style: normal;
            font-weight: 600;
            line-height: 160%; /* 2rem */
            letter-spacing: 0.00938rem;
          }
        }
      }
    }
  }
}

@media (min-width: 48rem) {
  .page-article {
    .page-article--article {
      .component-articles-list {
        align-content: flex-start;
        .component-articles-list--articles {
          flex-direction: row;
          justify-content: flex-start;
          width: 100%;
          .component-articles-list--article {
            width: 50%;
            .component-articles-list--image-link {
              height: auto;
              > picture > img {
                height: auto;
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 64rem) {
  .page-article {
    .page-article__page-banner {
      .page-article__button {
        max-width: 77rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .page-article--banner-image {
        > picture > img {
          height: auto;
          width: 100vw;
          min-height: 23.4375rem;
          object-fit: cover;
          max-width: none;
        }
      }
    }
    .page-article--article {
      max-width: 77rem;
      width: 100%;
      margin: 0 auto;
      .page-article--title {
        font-size: 2.125rem;
        font-style: normal;
        font-weight: 500;
        line-height: 123.5%; /* 2.62438rem */
        letter-spacing: 0.01563rem;
        text-wrap: auto;
      }
      .wrapper-asset {
        height: 52.5rem;
        > picture > img {
          width: 39.1875rem;
          height: 52.5rem;
          aspect-ratio: 209/280;
        }
      }
      .component-cms {
        h2 {
          font-size: 1.5rem;
          font-style: normal;
          font-weight: 500;
          line-height: 123.5%; /* 1.8525rem */
          letter-spacing: 0.01563rem;
        }
      }
    }
  }
}

@media (min-width: 90rem) {
  .page-article {
    .page-article--article {
      .page-article--share {
        position: absolute;
        left: 0;
        top: 26.313rem;
        .page-article__share--share-buttons {
          flex-direction: column;
        }
      }
      .component-articles-list {
        .component-articles-list--articles {
          gap: 2.5rem;
          .component-articles-list--article {
            width: 36.75rem;
            .component-articles-list--image-link {
              height: 12.25rem;
              > picture > img {
                height: auto;
              }
            }
          }
        }
      }
    }
  }
}