.landing-gallery {
  width: 100%;
  margin: 0 0 50px;

  &__slider {
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 35%;

    @include sm {
      padding-top: 100%;
    }
  }

  &__slide {
    position: absolute;
    top: 0;
    width: 100%;
    user-select: none;
    pointer-events: none;

    @include md {
      pointer-events: all;
    }

    @include sm {
      display: flex;
      flex-direction: column-reverse;
      height: 100%;
    }

    picture {
      height: 100%;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      pointer-events: none;

      &.animate__fadeIn {
        position: relative;
        opacity: 0;
        transition: 0.3s all;
      }
    }

    .js-current img {
      pointer-events: all;
    }
  }

  &__cta {
    position: absolute;
    bottom: 58px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100px);
    transition: all 200ms ease-out;

    @include sm {
      bottom: 30px;
      transform: translateY(70px);
    }
  }

  .js-current {
    pointer-events: all;

    img.animate {
      &__fadeIn {
        opacity: 1;
      }
    }

    .landing-gallery__slide-overlay.animate__fadeIn {
      transform: translateX(0%);
      opacity: 1;
    }

    & .landing-gallery__slide-overlay > div.animate__fadeIn {
      opacity: 1;
    }

    .landing-gallery__cta {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
  }

  .js-disable {
    opacity: 0.5;
    cursor: default;
  }

  .js-active {
    background-color: $primary-color;
  }
}