.ca-product-gallery {
  $block: &;
  $grid-gap: rem-calc(15);
  $minus-margin: calc(-1 * #{$default-spacing}/ 2);

  --slider-item-width: 100%;

  margin: 0 $minus-margin;

  @include bp(tablet) {
    --slider-item-width: 600px;

    margin: 0;
  }

  @include bp(laptop) {
    --slider-item-width: 100%;
  }

  &__main {
    position: relative;
  }

  &__slider {
    height: auto;
    position: relative;

    @include bp(laptop) {
      width: 100%;
      margin: 0 0 rem-calc(20);
    }
  }

  &__slide-overlay {
    display: none;

    @include bp(laptop) {
      @include flex-calign;

      position: absolute;
      inset: 0;
      background-color: rgb(0 0 0 / 10%);
      color: $c-text-inverse;
      font-size: 20px;
      pointer-events: none;
      opacity: 0;
      transition:
        opacity 200ms ease,
        font-size 200ms ease;
    }
  }

  &__slide {
    padding: 0;
    opacity: 0.6;
    transition: opacity 200ms ease;
    cursor: pointer;
    position: relative;

    @include bp(laptop) {
      padding: 0;
      opacity: 1;
    }

    &.ca-slide {
      &--current {
        opacity: 1;
      }
    }

    .ca-slider {
      &__lane {
        &--resetting & {
          transition: none;
        }
      }
    }

    &:hover {
      #{$block}__slide-overlay {
        opacity: 1;
        font-size: 70px;
      }
    }
  }

  .ca-slider-dots {
    position: absolute;
    margin-top: -28px;
  }

  &__nav {
    --slider-item-width: calc(100% / 6);

    margin: 0 rem-calc(-10);
  }

  &__nav-image {
    cursor: pointer;
  }

  &__nav-slide {
    padding: 0 rem-calc(10px);

    & > * {
      border: 2px solid transparent;
      transition: border-color 200ms ease;
    }

    &--current {
      & > * {
        border: 2px solid $c-border-light;
      }
    }
  }

  &__thumbnails {
    margin-top: $grid-gap;

    --slider-item-width: calc(100% / 2);

    &--grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $grid-gap;
    }
  }

  &__thumbnail-container {
    width: 100%;
  }

  &__campaigns {
    right: calc(14% + #{rem-calc(15)});
    position: absolute;
    top: rem-calc(15);

    @include bp(tablet) {
      right: calc(23.5% + #{rem-calc(15)});
    }

    @include bp(laptop) {
      right: rem-calc(15);
    }
  }
}