$margin-top: 1.5rem;

.landing-slider-section {
  width: 100%;
  overflow: hidden;
  .landing-slider-container {
    margin-top: $margin-top;
    height: calc(100dvh - $margin-top);
    min-height: calc(100dvh - $margin-top);

    .landing-slider {
      height: calc(100dvh - $margin-top);
      min-height: calc(100dvh - $margin-top);

      .swiper-button-prev,
      .swiper-button-next {
        color: $dark;
        border-radius: 100%;
        background-color: white;
        padding: 2rem;
      }

      .swiper-pagination {
        .swiper-pagination-bullet {
          background-color: $text-light;
          height: 13px;
          width: 13px;
          &.swiper-pagination-bullet-active {
            background-color: $primary;
          }
        }
      }

      .landing-slider-slide {
        height: calc(100dvh - $margin-top);
        min-height: calc(100dvh - $margin-top);
        position: relative;

        h1 {
          text-transform: uppercase;
          letter-spacing: 0.11875rem;
          font-weight: 900;
          font-size: 5.9375rem;
          text-align: center;
        }

        &.landing {
          width: 100%;
          height: 100%;
          background: url('../../assets/images/slider/carousel_1.jpg');
          background-position: center;
          background-size: cover;

          .landing-panel {
            background: rgba(225, 221, 221, 0.76);
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            place-items: center;
            align-content: center;

            span {
              margin-top: 1rem;
              font-size: 1.5rem;
              padding-inline: 1rem;
              padding-block: 0.125rem;
              color: $text-light;
              background-color: $primary;
              border-radius: 1.21875rem;
            }

            p {
              margin-top: 5rem;
              width: calc(1 / 2 * 100%);
              text-align: center;
              font-size: 1.75rem;
              font-weight: 400;
            }
          }
        }

        &.iecep-cares {
          width: 100%;
          height: 100%;
          background: url('../../assets/images/slider/iecepcareslogo.jpg');
          background-position: center;
          background-size: cover;

          .iecep-cares-panel {
            background-color: rgba(88, 24, 30, 0.7);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            place-items: center;
            align-content: center;
            color: $text-light;

            h1 {
              line-height: 0.9;
              text-align: center;
              text-transform: none;
            }

            span {
              margin-top: 1.12rem;
              font-size: 1.5rem;
              color: $text-light;
            }

            .learn-more {
              margin-top: 7rem;
              padding-block: 0.81rem;
              padding-inline: 2.25rem;
              border-radius: 1.5625rem;
              background-color: $primary;
              color: $text-light;
              text-decoration: none;
            }
          }
        }

        &.get-licensed {
          width: 100%;
          height: 100%;
          background: url('../../assets/images/slider/get_licensed.jpg');
          background-position: center;
          background-size: cover;

          .get-licensed-panel {
            background-color: rgba($color: #4d6066, $alpha: 0.7);
            backdrop-filter: opacity(0.1);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            place-items: center;
            align-content: center;
            color: $text-light;

            &::before {
              width: 100%;
              height: 100%;
            }

            h1 {
              line-height: 0.9;
              text-align: center;
              text-transform: none;
            }

            span {
              margin-top: 1.12rem;
              font-size: 1.5rem;
              color: $text-light;
            }

            .learn-more {
              margin-top: 7rem;
              padding-block: 0.81rem;
              padding-inline: 2.25rem;
              border-radius: 1.5625rem;
              background-color: $primary;
              color: $text-light;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .landing-slider-section {
    .landing-slider-container {
      .landing-slider {
        .landing-slider-slide {
          h1 {
            font-size: 4rem;
            width: calc(10 / 12 * 100%);
          }
          &.landing {
            background-color: red;
            .landing-panel {
              span {
                width: calc(2 / 3 * 100%);
                white-space: pre-wrap;
                word-break: break-word;
                padding: 2rem;
                text-align: center;
                border-radius: 4rem;
              }
              p {
                width: calc(3 / 4 * 100%);
                font-size: 1.25rem;
              }
            }
          }
          &.iecep-cares {
            span {
              width: calc(1 / 2 * 100%);
              text-align: center;
            }
            .learn-more {
              font-size: 1.5rem;
            }
          }
          &.get-licensed {
            .learn-more {
              font-size: 1.5rem;
            }
          }
        }
      }
    }
  }
}