/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */
.cpap__about-us-blog-authors {
  background: var(--cpap-primary-beige);
  padding: 120px 0;
  @media (max-width: 768px) {
    padding: 72px 0;
  }
  .cpap__about-us-blog-authors__header-container {
    text-align: center;
    max-width: 569px;
    margin: 0 auto;
    margin-bottom: 40px;
    @media (max-width: 768px) {
      margin-bottom: 32px;
    }
    h2 {
      color: var(--cpap-primary-soft-black);
      margin-bottom: 24px;
      @media (max-width: 768px) {
        margin-bottom: 16px;
      }
    }
    p {
      color: var(--cpap-text-text-gray);
      font-size: 17px;
      line-height: 24px;
    }
  }
  .cpap__about-us-blog-authors__carousel {
    margin: 0 -16px;
    padding-bottom: 34px;
    @media (max-width: 556px) {
      margin: 0 -10px;
      padding-right: 60px;
      padding-bottom: 26px;
    }
    .swiper-pagination {
      @media (max-width: 556px) {
        max-width: 233px;
      }
    }
    .swiper-slide {
      padding: 0 16px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      transform: translateZ(0px);
      @media (max-width: 556px) {
        padding: 0 10px;
      }
      /* 👇 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;
          & + .swiper-slide {
            opacity: 1;
            visibility: visible;
          }
        }
      }
      .cpap__about-us-blog-authors__carousel-card {
        background: var(--cpap-primary-white);
        box-shadow: 0px -4px 66px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 40px;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        @media (max-width: 768px) {
          padding: 39px 16px;
        }
        h3 {
          color: var(--cpap-primary-soft-black);
          font: 500 var(--cpap-typography-font-md);
          margin-bottom: 8px;
        }
        p {
          color: var(--cpap-text-text-gray);
          font: var(--cpap-typography-font-s-bold);
          margin-bottom: 12px;
        }
        & > div {
          flex-basis: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
        }
        .cpap__theme__button--white {
          padding: 10.5px 15px;
        }
      }
    }
  }
}