.gallery-slider {
  position: relative;
  opacity: 0;
  transition: opacity 1s ease-out;

  &__main {
    width: 100%;
    height: 580px;
    overflow: hidden;

    @include md {
      height: $default-hero-height-tablet;
    }

    @include sm {
      height: $default-hero-height-mobile;
    }
  }

  &__nav {
    max-width: $max-width;
    margin: auto;
    height: 100%;
    position: relative;
  }

  &__slide {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    overflow-x: hidden;
    opacity: 0;
    z-index: 1;
    pointer-events: none;

    &--current {
      opacity: 1;
      z-index: 1;
      position: relative;
    }

    &-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
    }

    &-img {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #fff;
      position: absolute;
      pointer-events: none;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: rgba(0,0,0,.4);
    }

    &-overlay2 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      pointer-events: none;
      background-image: linear-gradient(-180deg,transparent,rgba(0,0,0,.4));
    }
  }

  &__nav-btn {
    height: 60px;
    width: 60px;
    display: block;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    top: 260px;
    z-index: 3;
    right: 30px;
    opacity: .7;
    transition: opacity .25s ease-in-out;

    &:after {
      content: " ";
      display: block;
      width: 10px;
      height: 10px;
      top: 50%;
      margin-left: -6px;
      margin-top: -5px;
      left: 50%;
      position: absolute;
      border-color: $primary-color;
      border-style: solid;
      border-width: 2px 2px 0 0;
      transform: rotate(45deg);
    }

    &:hover {
      opacity: 1;
    }

    @include md {
      top: 164px;
    }

    @include sm {
      height: 40px;
      width: 40px;
      top: 233px;
      right: 20px;
      margin-top: 0;
    }
  }
}