:root {
  --injuries-radius: var(--radius-medium);
  --injuries-background: var(--color-turqoise-500);
  --injury-category-shadow: var(--shadow-large);
  --injuries-padding: 1rem;
  --injuries-columns: 1;
  --injuries-gap: 1rem;
  --injuries-transform: var(--card-transform);
}

  @media (min-width: 475px) {:root {
    --injuries-columns: 2;
    --injuries-gap: 1rem
}
  }

  @media (min-width: 768px) {:root {
    --injuries-columns: 3;
    --injuries-gap: 1rem
}
  }

  @media (min-width: 1024px) {:root {
    --injuries-gap: 4rem
}
  }

/**
 * Inury Categories Wrapper
 */

.injury-categories-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: 1rem;
  grid-gap: var(--injuries-gap);
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--injuries-gap);
  gap: var(--injuries-gap);
}

/**
 * Inury Categories Title
 */

.injury-categories-title {
  margin-bottom: 5rem;
}

/**
 * Inury Category
 */

.injury-category {
  display: grid;
  grid-template-areas: "a";
  grid-template-columns: repeat(1, 1fr);
  align-content: center;
  justify-content: center;
  place-content: center;
  transition: var(--transition-fast);
  position: relative;
  border-radius: var(--radius-medium);
  border-radius: var(--injuries-radius);
  overflow: hidden;
  box-shadow: none;
}

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

.injury-category .link-absolute {
  background: var(--color-turqoise-500);
  background: var(--injuries-background);
  opacity: 0.25;
}

.injury-category-image,
.injury-category-title {
  grid-area: a;
}

.injury-category-image {
  border-radius: var(--radius-medium);
  border-radius: var(--injuries-radius);
  border-bottom-left-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 1.15;
}

.injury-category-title {
  background: var(--color-turqoise-500);
  background: var(--injuries-background);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: var(--radius-medium);
  border-top-left-radius: var(--injuries-radius);
  border-bottom-right-radius: var(--radius-medium);
  border-bottom-right-radius: var(--injuries-radius);
  padding: 1rem 2rem;
  padding: var(--injuries-padding) calc(var(--injuries-padding)*2);;
  margin-top: 1rem;;
  margin-top: var(--injuries-gap);
  margin-bottom: 0.5rem;
  margin-bottom: calc(var(--injuries-gap)/2);
  align-self: center;
  justify-self: center;
  text-align: center;
}

/**
 * Injuries
 */

.injury-category-injuries {
  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: 1rem;
  grid-gap: var(--injuries-gap);
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--injuries-gap);
  gap: var(--injuries-gap);
}