.explore-other-categories__wrapper {
  padding: var(--sizing-xl) var(--sizing-l);

  @media (width >= 768px) {
    margin: auto;
    padding: var(--spacing-big) 0 var(--spacing-big) var(--sizing-l);
  }

  @media (width >= 1024px) {
    padding: 50px 0 50px var(--container-margin);
  }

  .explore-other-categories__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);

    @media (width >= 768px) {
      padding-right: var(--container-margin);
    }

    @media (width >= 1024px) {
      padding-right: var(--container-margin);
      margin-bottom: 22px;
    }

    .explore-other-categories__header-content {
      .explore-other-categories__title h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: var(--neutrals-sub-texts-paragraphs);
        font-size: var(--fs-large);
        font-weight: var(--fw-400);
        line-height: var(--lh-normal);
        letter-spacing: -0.3px;

        @media (width >= 768px) {
          font-feature-settings: var(--font-settings);
          font-size: var(--fs-xslarge);
          letter-spacing: 0;
        }

        @media (width >= 1024px) {
          font-size: var(--fs-xxlarge);
        }
      }
    }

    .explore-other-categories__nav-wrapper {
      display: none !important;

      @media (width >= 1024px) {
        display: flex !important;
      }
    }
  }

  .explore-other-categories__categories-wrapper {
    overflow: hidden;

    @media (width >= 768px) {
      position: relative;
      z-index: 2;
    }

    .splide__list {
      display: flex;
      flex-direction: row;
      list-style: none;
      /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
      flex-flow: row wrap;
      gap: var(--grid-gutter-width);

      @media (width >= 768px) {
        flex-wrap: unset;
        gap: 0;
      }

      .explore-other-categories__card {
        position: relative;
        flex: 0 0 calc(47.5%);
        aspect-ratio: 1 / 1;

        @media (width >= 768px) {
          width: 100%;
          margin-right: var(--spacing-small);
          flex: 0 0 calc(100%);
          aspect-ratio: unset;
        }

        @media (width >= 1024px) {
          margin-right: var(--spacing-medium);
        }
      }

      .explore-other-categories__card-content-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .explore-other-categories__image-wrapper {
          display: flex;
          width: 100%;
          height: 100%;
        }

        .explore-other-categories__image-inner {
          position: relative;
          display: flex;
          width: 100%;
          height: 100%;

          picture{
            width: 100%;
            height: auto;
          }

          @media (width < 768px) {
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 69%;
              z-index: 2;
              background: linear-gradient(0deg, var(--ui-text-icon-high) 26.41%, var(--gradient-thin-black-color) 100%);
            }
          }
        }

        @media (width >= 768px) {
          align-items: flex-end;
          background: var(--background-black-color);

          .explore-other-categories__image-wrapper {
            width: 100%;
            position: relative;

            .explore-other-categories__image-inner {
              width: 100%;
              height: 100%;
              position: relative;
              overflow: hidden;
              transition: transform 0.5s ease-in-out;

              &::before {
                content: '';
                background: linear-gradient(268deg, rgba(0 0 0 / 0%) 49.15%, #000 82%,#000 100% );
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 2;
                transition: transform 0.5s ease-in-out;
              }

              .explore-other-categories__card-image {
                position: relative;
                z-index: 1;
              }
            }

            .explore-other-categories__card-content-wrapper:hover & .explore-other-categories__image-inner .explore-other-categories__card-image {
              transform: scale(1.1);
            }
          }
        }

        .explore-other-categories__card-image {
          width: 100%;
          height: 100%;
          aspect-ratio: 1 / 1;
          object-fit: cover;
          transition: transform 0.5s ease-in-out;

          @media (width >= 768px) {
            aspect-ratio: 143/58;
          }

          @media (width >= 1024px) {
            aspect-ratio: 467/183;
          }
        }

        .explore-other-categories__card-content {
          position: absolute;
          bottom: 8px;
          left: 8px;
          color: var(--tertiary-color);
          z-index: 5;

          @media (width >= 768px) {
            bottom: 15px;
            left: 16px;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xsmall);
          }

          @media (width >= 1024px) {
            bottom: 29px;
            left: 24px;
            gap: var(--spacing-xs);
          }

          .explore-other-categories__card-label {
            font-size: var(--fs-medium);
            font-weight: var(--fw-400);
            line-height: var(--lh-normal);
            letter-spacing: 0.8px;
            margin: 0;
            word-break: break-word;

            @media (width >= 768px) {
              font-feature-settings: var(--font-settings);
              font-weight: var(--fw-500);
              line-height: 1.92rem;
              letter-spacing: 0.8px;
            }

            @media (width >= 1024px) {
              font-size: var(--fs-xlarge);
              font-weight: var(--fw-400);
              line-height: 2.9rem;
            }
          }

          .explore-other-categories__card-description {
            display: none;

            @media (width >= 768px) {
              display: block;
              color: var(--static-interactive-dots);
              font-size: var(--fs-xsmall);
              font-weight: var(--fw-400);
              line-height: 1.44rem;
            }

            @media (width >= 1024px) {
              font-size: var(--fs-small);
              font-weight: var(--fw-300);
              line-height: 1.7rem;
            }
          }
        }
      }
    }
  }
}