/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */
.cpap__about-cpap-guides {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-bottom: 120px;
  padding-top: 120px;
  @media (max-width: 768px) {
    margin-bottom: 72px;
  }

  @media (max-width: 417px) {
    padding-top: 72px;
  }

  .cpap__about-cpap-guides__header-container {
    text-align: center;
    max-width: 647px;
    margin: 0 auto;
    margin-bottom: 65px;
    @media (max-width: 768px) {
      text-align: left;
      margin-bottom: 40px;
    }
    h2 {
      color: var(--cpap-primary-white);
      margin-bottom: 24px;
      @media (max-width: 768px) {
        margin-bottom: 16px;
      }
    }
    p {
      color: var(--cpap-primary-white);
      font: 500 var(--cpap-typography-font-md);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .swiper-wrapper {
    max-height: 725px;
  }

  .cpap__about-cpap-guides__carousel {
    margin: 0 -31px;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
    @media (max-width: 556px) {
      margin: 0 -10.5px;
      padding-right: 62px;
      padding-bottom: 26px;
    }

    .swiper-slide {
      padding: 0 16px;
      transition: all 0.3s;
      transform: translateZ(0px);
      flex: 1 0;
      flex-basis: 33.33%;

      @media (min-width: 992.5px) {
        /* 👇 The following is a Swiper.js  overrides and therefore can't utilize the BEM naming convention */
        &.swiper-slide-active {
          opacity: 1;
          visibility: visible;
        }
        &.swiper-slide-next {
          opacity: 1;
          visibility: visible;
          & + .swiper-slide {
            opacity: 1;
            visibility: visible;
          }
        }
      }

      @media (max-width: 992px) {
        /* 👇 The following is a Swiper.js overrides and therefore can't utilize the BEM naming convention */
        flex-basis: 50%;

        &.swiper-slide-active {
          opacity: 1;
          visibility: visible;
        }
        &.swiper-slide-next {
          opacity: 1;
          visibility: visible;
        }
      }

      @media (max-width: 556px) {
        padding: 0 10.5px;
        opacity: 1 !important;
        visibility: visible !important;
        flex-basis: 100%;
      }

      .swiper-slide-box {
        border-radius: 8px 8px 16px 16px;
        height: 100%;
        background: var(--cpap-primary-white);
        box-shadow: 0px -4px 66px rgba(0, 0, 0, 0.08);
        position: relative;
        &:before,
        &:after {
          content: '';
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1;
          border-radius: 0px 0px 16px 16px;
        }
        &:before {
          z-index: 2;
          background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        &:after {
          z-index: 1;
          background: linear-gradient(90deg, #ffaa8f 27.15%, #f0c6ff 70.37%);
        }
        .cpap__about-cpap-guides__background-image-container {
          .cpap__about-cpap-guides__background-image {
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            padding-top: calc((420 / 421) * 100%);
            border-radius: 8px 8px 0 0;
          }
        }
        .cpap__about-cpap-guides__footer {
          position: relative;
          z-index: 3;
          padding: 40px 32px 24px 32px;
          @media (max-width: 768px) {
            padding: 24px 16px 32px 16px;
          }
          blockquote {
            padding: 0;
            font-style: normal;
            font: var(--cpap-typography-font-md);
            color: var(--cpap-primary-soft-black);
            margin-bottom: 32px;
            @media (max-width: 768px) {
              margin-bottom: 24px;
            }
          }
          .cpap__about-cpap-guides__signature-image-container {
            margin-bottom: 4.75px;
            @media (max-width: 768px) {
              margin-bottom: 4px;
              display: flex;
            }
            img {
              max-width: 150px;
            }
          }
          cite {
            font-style: normal;
            font: var(--cpap-typography-font-s-bold);
            color: var(--cpap-primary-soft-black);
            display: block;
            margin-bottom: 8px;
          }
          p {
            color: var(--cpap-text-text-gray);
            font: var(--cpap-typography-font-s-bold);
            margin-bottom: 4px;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}