.cpap__flyout.cpap__flyout-sleep-stories {
  &:not(.cpap__flyout__animation-step-1) {
    display: none;
  }
  .cpap__flyout__flyout .cpap__flyout__container .cpap__flyout__content-container {
    padding: 0;
    @media (max-width: 556px) {
      overflow: hidden;
    }
  }
  @media (min-width: 556.5px) {
    .cpap__flyout__flyout {
      align-items: center;
      justify-content: center;
      .cpap__flyout__container {
        width: 100%;
        max-width: 898px;
        transform: none;
        height: auto;
        .cpap__flyout__close-button {
          top: -60px;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .cpap__flyout__content-container {
          background: none;
          padding: 0;

          &:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: conic-gradient(
              from 180deg at 50% 50%,
              #afff93 -38.19deg,
              #afff93 40.59deg,
              #c0f2fd 133.33deg,
              #c0f2fd 229.64deg,
              #afff93 321.81deg,
              #afff93 400.59deg
            );
            filter: blur(16px);
            border-radius: 16px;
          }
          .cpap__flyout__scroll-container {
            position: relative;
            z-index: 2;
            overflow: hidden;
            border-radius: 16px;
          }
        }
      }
    }
  }

  .cpap__flyout-sleep-stories__carousel {
    height: 100%;
    .swiper-button-prev,
    .swiper-button-next {
      top: 12px;
      transform: none;
      margin: 0;
    }
    .swiper-button-prev {
      left: 72px;
      @media (max-width: 556px) {
        left: 24px;
      }
    }
    .swiper-button-next {
      right: 72px;
      @media (max-width: 556px) {
        right: 24px;
      }
    }
    .swiper-wrapper {
      height: 100%;
      .swiper-slide {
        background: var(--cpap-primary-white);
        h2 {
          color: var(--cpap-primary-soft-black);
          font: 500 var(--cpap-typography-font-lg);
          padding: 18px 70px 22px 70px;
          text-align: center;
          background: var(--cpap-primary-beige);
          margin-bottom: 0;
          @media (max-width: 556px) {
            padding: 20px 70px 20px 70px;
          }
        }
        .swiper-content {
          padding: 32px 72px 48px 72px;
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100% - 64px);
          max-height: calc(100vh - 245px);
          @media (max-width: 556px) {
            padding: 24px 20px 20px 20px;
            max-height: initial;
          }
          p {
            color: var(--cpap-text-text-gray);
            font-weight: 400;
            font-size: 17px;
            line-height: 26px;
            margin-bottom: 24px;
            text-indent: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            &:nth-child(2) {
              text-indent: 8px;
            }
            &:first-child {
              text-indent: 0;
            }
          }
        }
      }
    }
  }
}