.hero-slider {

  margin: 0 auto;
  position: relative;

  @media (width > 760px) {
    display: grid;
    grid-auto-columns: 44% 1fr;
    grid-auto-flow: column;
    width: 100%;
    gap: 2.5rem;
    max-width: 83.375rem;
    align-items: center;
  }

  @media (width > 1160px) {
    gap: 3.75rem;
  }

  @media (width > 1320px) {
    grid-auto-columns: 29.25rem 1fr;
    gap: 5.5rem;
  }
}

.hero-slider__image {

  margin-bottom: 2rem;
  order: 2;
  position: relative;
  box-shadow: var(--shadow-large);
  border-radius: 2.8125rem;

  @media (width > 1024px) {
    border-radius: 3.75rem;
  }

  &::after {
    content: "";
    position: absolute;
    width: 672px;
    height: 583px;
    border-radius: 672px;
    opacity: 0.76;
    background: #FF9540;
    filter: blur(150px);
    left: 50%;
    margin-left: -335px;
    top: -80px;
    z-index: -1;
    animation: moveGradient3 14s ease 2s infinite;
  }

  &::before {
    content: "";
    position: absolute;
    width: 672px;
    height: 583px;
    border-radius: 672px;
    opacity: 0.86;
    background: #FF9540;
    filter: blur(150px);
    left: 50%;
    margin-left: -335px;
    top: -80px;
    z-index: -1;
    animation: moveGradient4 12s ease 0s infinite;
  }



  @media (width > 760px) {
    margin-bottom: 0;
  }
}

#slider2 {
  margin-bottom: 0;
  overflow: hidden;

  li {
    border: 0.375rem solid #ffffff;
    border-radius: 2.8125rem;
    overflow: hidden;

    @media (width > 560px) {
      border: 0.5rem solid #ffffff;
    }

    @media (width > 1024px) {
      border-radius: 3.75rem;
      border: 0.75rem solid #ffffff;
    }
  }

  img {
    aspect-ratio: 752 / 655;
    object-fit: cover;
    width: 100%;

    @media (width > 1200px) {
      aspect-ratio: 752 / 655;
    }
  }
}

.hero-slider__call-to-action {
  display: flex;
  align-items: center;
  margin-top: 1.6875rem;
  justify-content: space-between;
  gap: 0.375rem;

  @media (width > 359px) {
    gap: 0.75rem;
  }

  @media (width > 760px) {
    margin-top: 1.5rem;
  }

  @media (width > 1320px) {
    margin-top: 2rem;
  }
}

.hero-slider__call-to-action-text {
  font-family: 'DIN Next LT Pro Condensed';
  font-weight: 400;
  text-align: center;
  line-height: 1;
  font-size: 1.125rem;

  @media (width > 359px) {
    font-size: 1.25rem;
  }

  @media (width > 369px) {
    font-size: 1.375rem;
  }

  @media (width > 379px) {
    font-size: 1.5rem;
  }

  @media (width > 760px) {
    font-size: 1.125rem;
  }

  @media (width > 1320px) {
    font-size: 1.5rem;
  }
}

.hero-slider__content {
  container-type: inline-size;
  padding: 0 0.75rem;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 672px;
    height: 583px;
    border-radius: 672px;
    opacity: 0.36;
    background: #0BC1F6;
    filter: blur(150px);
    left: 50%;
    margin-left: -335px;
    top: 0;
    z-index: -1;
    transform: translateX(0px);
    animation: moveGradient1 10s ease 0s infinite;
    display: none;
  }

  &::after {
    content: "";
    position: absolute;
    width: 672px;
    height: 583px;
    border-radius: 672px;
    opacity: 0.76;
    background: #0BC1F6;
    filter: blur(150px);
    left: 50%;
    margin-left: -335px;
    top: -80px;
    z-index: -1;
    animation: moveGradient2 13s ease 0s infinite;
  }

  @media (width > 760px) {
    margin-top: 0.375rem;
  }
}

@keyframes moveGradient1 {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(300px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes moveGradient2 {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  50% {
    transform: translate3d(280px, -123px, 0px);
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}

@keyframes moveGradient3 {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  50% {
    transform: translate3d(-240px, 206px, 0px);
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}

@keyframes moveGradient4 {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  50% {
    transform: translate3d(-240px, -89px, 0px);
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}


.hero-slider__title-wrapper h1 {
  font-size: 32.8cqi;
  line-height: 0.75;
  margin: 0;
}

.hero-slider__title-wrapper h2 {
  font-size: 21cqw;
  line-height: 0.8;
  margin: 0;
}

.hero-slider__title-wrapper h3 {
  font-size: 11cqw;
  line-height: 1;
  margin: 0;
}

.hero-slider__gradient-bg {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  display: none;
}

.hero-slider__gradient-bg__one {
  width: 58vw;
  position: absolute;
  right: -135.25rem;
  top: 1rem;
  height: 60%;
  border-radius: 23.5625rem;
  background: #FF9540;
  filter: blur(3.875rem);
  z-index: 3;
}

.hero-slider__gradient-bg__two {
  width: 50vw;
  height: 60%;
  border-radius: 25.8125rem;
  background: #0BC1F6;
  filter: blur(6.25rem);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.hero-slider__gradient-bg__three {
  width: 69vw;
  height: 50%;
  border-radius: 25.8125rem;
  background: #0BC1F6;
  filter: blur(5rem);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
}

.hero-slider__gradient-bg__four {
  width: 66vw;
  position: absolute;
  right: -66px;
  top: 68%;
  height: 40%;
  border-radius: 14.875rem;
  background: #FF9540;
  filter: blur(3.125rem);
  z-index: 4;
}