.collection-slider {
  display: block;

  .collection-slider__container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    user-select: none;

    .collection-slider__heading {
      font-size: var(--HZ);
      font-weight: 700;
      text-align: var(--TA);
    }

    .collection-slider__wrapper {
      position: relative;

      .collection-slider__navigation {
        --size: 4.4rem;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0 2rem;
        pointer-events: none;
        position: absolute;
        top: 50%;
        translate: 0 -100%;
        width: 100%;
        z-index: 2;

        button {
          all: unset;
          cursor: pointer;
          display: grid;
          height: var(--size);
          place-items: center;
          pointer-events: all;
          width: var(--size);

          &.swiper-button-disabled {
            cursor: not-allowed;
            opacity: 0.25;
          }

          rect {
            fill: #111;
            transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
          }

          path {
            stroke: #fff;
            transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
          }

          &:hover rect {
            fill: #fff;
          }

          &:hover path {
            stroke: #111;
          }
        }
      }

      .collection-slider__product {
        color: inherit;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        text-decoration: none;

        .collection-slider__product-image {
          border-radius: 2rem;
          min-height: 100%;
          overflow: hidden;
          padding-bottom: 137.75%;
          position: relative;

          .collection-slider__product-image-tag {
            height: 100%;
            object-fit: cover;
            position: absolute;
            width: 100%;
          }
        }

        .collection-slider__product-title {
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: 1.2;
        }

        .collection-slider__product-price {
          font-size: 1.8rem;
          font-weight: 300;
        }
      }

      @media (width < 768px) {
        .collection-slider__navigation {
          --size: 4rem;
          justify-content: center;
          position: static;
          translate: 0;
        }
      }
    }
  }
}