.sub-categories__page-container {
  padding-inline: calc(var(--page-padding) - 1.5rem) !important;
  margin-bottom: 3.2rem;

  /*page padding changes to 5rem at this point*/
  @media (min-width: 1280px) {
    padding-inline: calc(var(--page-padding) - 5rem) !important;
  }
}

.sub-categories {
  display: block;
  position: relative;

  &::before, &::after {
    opacity: 0;
    position: absolute;
    content: "";
    height: 100%;
    width: 8rem; 
    z-index: 1;
    pointer-events: none;
    top: 0;
    transition: opacity 0.3s ease
  }

  &::before {
    background: linear-gradient(90deg, #F5F5F5 0%, rgba(245, 245, 245, 0.00) 100%);
    left: 0;
  }

  &.off-left::before {
    opacity: 1;
  }

  &::after {
    background: linear-gradient(270deg, #F5F5F5 0%, rgba(245, 245, 245, 0.00) 100%);
    right: 0;
  }

  &.off-right::after {
    opacity: 1;
  }

  .sub-categories__swiper {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 1.5rem;
    cursor: grab;

    @media (min-width: 1280px) {
      padding: 0 5rem;
    }

    &:has(.sub-categories__tile--no-image) {
      .sub-categories__image-wrapper {
        display: none;
      }

      .sub-categories__tile-title {
        white-space: nowrap;
      }

      .sub-categories__tile {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
      }
    }
  }

  .sub-categories__swiper.grabbing {
    cursor: grabbing;

    .sub-categories__tile {
      cursor: grabbing;
    }
  }

  .sub-categories__swiper-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1.2rem;

    @media (min-width: 768px) {
      gap: 1.6rem;
    }
  }

  .sub-categories__tile {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1.2rem;
    border-radius: 0.8rem;
    border: 1px solid var(--color-neutral-10);
    box-shadow: 0 0 20px 0 rgba(177, 177, 177, 0.10);
    padding: 1.2rem;
    user-select: none;
    background: #FFF;

    .sub-categories__image-wrapper {
      height: 72px;
      width: 72px;

      img {
        /*remove alt image text on load (firefox)*/
        color: transparent !important;
      }
    }

    &:hover {
      border-color: var(--color-neutral-50);
    }

    &.sub-categories__tile--selected {
      border-color: var(--color-neutral-70);
      cursor: default;
    }

    @media (min-width: 768px) {
      padding: 1.6rem;

      .sub-categories__image-wrapper {
        height: 96px;
        width: 96px;
      }
    }

    .sub-categories__tile-title {
      text-align: center;
    }
  }
}