:root {
  --injury-shadow: var(--shadow-large);
  --injury-transform: var(--card-transform);
  --injuries-radius: var(--radius-medium);
  --injuries-columns: 1;
  --injuries-gap: 3.5rem;
}

  @media (min-width: 1024px) {:root {
    --injuries-columns: 2
}
  }

/**
 * Injuries Wrapper
 */

.injuries-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-columns: repeat(var(--injuries-columns), 1fr);
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  grid-gap: 3.5rem;
  grid-gap: var(--injuries-gap);
  grid-gap: 3.5rem;
  gap: 3.5rem;
  grid-gap: var(--injuries-gap);
  gap: var(--injuries-gap);
}

/**
 * Injuries Title
 */

.injuries-title {
  margin-bottom: 5rem;
}

/**
 * Injury
 */

.injury {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-gap: 0.875rem;
  gap: 0.875rem;
  position: relative;
}

/**
 * Injury Image
 */

.injury-image {
  transition: var(--transition-fast);
  border-radius: var(--radius-medium);
  border-radius: var(--injuries-radius);
  border-bottom-left-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  box-shadow: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.injury:hover .injury-image {
    box-shadow: var(--shadow-large);
    box-shadow: var(--injury-shadow);
    transform: var(--card-transform);
    transform: var(--injury-transform);
  }

/**
 * Injury Layout
 */

.injury-layout {
  display: grid;
  grid-template-areas:
    "navigation"
    "content"
  ;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 4rem;
  gap: 4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {

.injury-layout {
    grid-template-areas: "navigation . content";
    grid-template-columns: 20rem minmax(0, 15rem) minmax(32rem, 1fr);
    padding-top: 4rem;
    padding-bottom: 10rem;
    grid-gap: 2rem;
    gap: 2rem
}
  }

.injury-layout-navigation {
  grid-area: navigation;
}

.injury-layout-content {
  grid-area: content;
}

.injury-layout-content a:not(.woocommerce-loop-product__link):not(.link-button) {
    color: var(--color-red-500);
  }

.injury-layout-content .section {
  --section-margin: 0;
  padding-top: calc(var(--padding-y)/2);
  padding-bottom: calc(var(--padding-y)/2);
  scroll-margin-top: 10rem;
}

.injury-layout-content .section#description {
    --padding-y: 0;
  }

.injury-layout-content .products {
  display: flex !important;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: calc(100vw - var(--padding-x)*2);
  padding-bottom: 2rem;
}

.injury-layout-content .products > * {
    scroll-snap-align: center;
  }

.injury-layout-content .products::-webkit-scrollbar {
    width: 10rem;
    width: var(--scrollbar-size, 10rem);
    height: var(--scrollbar-size)
  }

.injury-layout-content .products::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-size);
    background: var(--scrollbar-color);
  }

.injury-layout-content .products::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    margin-left: var(--scrollbar-margin);
    margin-right: calc(var(--scrollbar-margin) + var(--padding-x));
  }

@media (min-width: 640px) {

.injury-layout-content .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding-bottom: 0;
    width: auto;
    transform: translateX(0)
}
  }

.injury-layout-content .products > li {
    min-width: 75vw;
  }

@media (min-width: 640px) {

.injury-layout-content .products > li {
      min-width: 0
  }
    }

/**
 * Injury Navigation
 */

.injury-navigation {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
  top: 12rem;
  font-size: 1.125rem;
  position: sticky;
}

@media (min-width: 1024px) {

.injury-navigation {
    position: sticky
}
  }

.injury-navigation .link {
  margin-top: 2rem;
}

.injury-navigation .link svg {
  transform: rotate(90deg);
  max-width: 14px;
  margin-right: 1rem;
}

.injury-navigation .pagenav-link.active ~ *,
.injury-navigation .pagenav-link.active {
  font-weight: 800;
}