/* Figma: section stocks — cards 345×345, radius 10, gap 20; header row desktop / column mobile */

.promotions-section {
  & .index-block-header {
    @media (max-width: 767px) {
      flex-direction: column-reverse;
      gap: 6px 20px;
    }
  }

  & .index-block-header__tag {
    text-transform: uppercase;
    animation: none;
  }
}

.promotions-carousel {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 10px;

  & .promotions-carousel__btn-nav {
    display: inline-flex;
    align-items: center;

    &:has(.swiper-button-disabled) {
      display: none;
    }

    @media (max-width: 1200px) {
      display: none;
    }
  }

  & .promotions-carousel__carousel {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;

    & .swiper-slide {
      flex-shrink: 0;
      box-sizing: border-box;
      width: 345px;
      height: 345px;
    }

    @media (max-width: 380px) {
      & .swiper-slide {
        width: min(345px, calc(100vw - 48px));
        height: min(345px, calc(100vw - 48px));
      }
    }
  }

  & .promotions-carousel__arrow {
    all: unset;

    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: rgba(134, 139, 171, 0.70);
    color: #ffffff;

    cursor: pointer;

    @media (hover: hover) {}

    &.main-page-banner__arrow--prev {
      left: 10px;
    }

    &.main-page-banner__arrow--next {
      right: 10px;
    }
  }

  @media (max-width: 960px) {
    & .promotions-carousel__btn-nav {
      display: none;
    }
  }
}

.promotions-carousel-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;

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