.explore-sub-categories__wrapper {
  padding-block: var(--spacing-medium);

  @media (width >= 768px) {
    padding-block: var(--spacing-big);
  }

  @media (width >= 1024px) {
    padding-block: 50px;
  }

  .explore-sub-categories__content {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-medium);

    .explore-sub-categories__title h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--ui-text-icon-high);
      font-size: var(--fs-large);
      font-weight: var(--fw-400);
      line-height: var(--lh-xlarge);

      @media (width >= 768px) {
        color: var(--neutrals-sub-texts-paragraphs);
        font-feature-settings: var(--font-settings);
        font-size: var(--fs-xslarge);
        line-height: var(--lh-normal);
      }

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

    .explore-sub-categories__container {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacing-medium);

      .explore-sub-categories__card-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--grid-gutter-width) var(--spacing-xsmall);
        justify-content: flex-start;

        @media (width >= 768px) {
          gap: 14px;
        }

        @media (width >= 1024px) {
          gap: var(--grid-gutter-width);
        }

        .explore-sub-categories__card {
          flex-basis: calc((100% - 16px) / 3);
          overflow: hidden;
          position: relative;
          aspect-ratio: 1 / 1;

          img {
            transition: transform 0.5s ease-in-out;
          }

          &:hover img {
            transform: scale(1.1);
          }

          @media (width >= 768px) {
            flex-basis: calc((100% - (5 * 14px)) / 6);
          }

          @media (width >= 1024px) {
            flex-basis: calc((100% - (5 * 24px)) / 6);
          }

          .explore-sub-categories__card-content-wrapper {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            aspect-ratio: 1 / 1;
            overflow: hidden;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background:
                linear-gradient(180deg, var(--gradient-black-background) 26.38%, var(--gradient-overlay-black-80) 100%),
                -25.314px 0 / 151.117% 100% no-repeat;
              z-index: 1;

              @media (width >= 768px) {
                background: linear-gradient(180deg, var(--gradient-gray-41-5) 21.99%, var(--gradient-black-98) 89.35%);
              }
            }

            .explore-sub-categories__card-image {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }

            .explore-sub-categories__card-content {
              position: absolute;
              bottom: 8px;
              left: 0;
              z-index: 2;
              width: 100%;
              color: var(--tertiary-color);
              text-align: center;

              @media (width >= 1024px) {
                bottom: var(--spacing-2xs);
              }

              .explore-sub-categories__card-label {
                font-size: var(--fs-xsmall);
                font-weight: var(--fw-600);
                line-height: var(--lh-normal);

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

      .explore-sub-categories__view-toggle {
        position: relative;
        display: inline-flex;
        margin-inline: auto;
        align-items: center;
        gap: var(--spacing-xsmall);
        flex: 1 0 0;
        cursor: pointer;
        padding: var(--spacing-xsmall) var(--spacing-l);
        font-size: var(--fs-small);
        font-weight: var(--fw-500);
        line-height: var(--lh-medium);
        letter-spacing: 0.14px;

        &::after {
          content: '';
          display: inline-block;
          width: 18px;
          height: 18px;
          background-image: url('/genuine-accessories/icons/view-more-less.svg');
          background-size: contain;
          background-repeat: no-repeat;
        }

        &:hover:is(:not(:disabled)):is(:not(._disabled)) {
          color: var(--primary-variations-primary);
          background-color: unset;
        }
      }
    }
  }
}