:root {
  --injuries-radius: var(--radius-medium);
  --injuries-grid-padding: clamp(1.5rem, 5vw, 3rem);
  --injuries-grid-columns: 1;
  --injuries-grid-gap: 2rem;
  --injuries-grid-radius: 1.5rem;
  --injuries-grid-background: var(--color-white);
  --injuries-grid-background-alt: var(--color-turqoise-200);
  --injuries-grid-color: var(--body-color);
  --injuries-grid-transform: translateY(calc(var(--injuries-grid-gap)/-4));
  --injuries-grid-shadow: var(--shadow-large);
}

.product-injuries-grid {
  --injuries-grid-columns: 1;
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-gap: var(--injuries-grid-gap);
  gap: var(--injuries-grid-gap);
  grid-template-columns: repeat(1, 1fr);
  grid-template-columns: repeat(var(--injuries-grid-columns), 1fr);
}

.product-injuries-grid > :first-child {
    grid-column: span 1;
    grid-column: span var(--injuries-grid-columns);
  }

.product-injuries-grid > :not(:first-child) .injury-image {
      display: none;
    }

.product-injuries-grid > :not(:first-child) .injury-image img {
        -o-object-fit: cover;
           object-fit: cover;
      }

.product-injuries-grid[data-items="2"] .injury-image {
      display: block;
    }

.product-injuries-grid[data-items="3"] {
    --injuries-grid-columns: 1;
  }

@media (min-width: 1024px) {

.product-injuries-grid[data-items="3"] {
      --injuries-grid-columns: 2
  }
    }

.product-injuries-grid[data-items="4"] {
    --injuries-grid-columns: 1;
  }

@media (min-width: 640px) {

.product-injuries-grid[data-items="4"] {
      --injuries-grid-columns: 2
  }

      .product-injuries-grid[data-items="4"] > :last-child {
        grid-column: span 1;
        grid-column: span var(--injuries-grid-columns);
      }
    }

@media (min-width: 1024px) {

.product-injuries-grid[data-items="4"] {
      --injuries-grid-columns: 3
  }

      .product-injuries-grid[data-items="4"] > :last-child {
        grid-column: span 1;
      }
    }

.product-injuries-grid .injury {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-gap: 1rem;
    gap: 1rem;
    background: var(--color-white);
    background: var(--injuries-grid-background);
    color: var(--body-color);
    color: var(--injuries-grid-color);
    border-radius: 1.5rem;
    border-radius: var(--injuries-grid-radius);
    overflow: hidden;
    box-shadow: none;
    transition: var(--transition-fast);
  }

.product-injuries-grid .injury:hover {
      box-shadow: var(--shadow-large);
      box-shadow: var(--injuries-grid-shadow);
      transform: translateY(-0.5rem);
      transform: var(--injuries-grid-transform);
    }

@media (min-width: 768px) {

.product-injuries-grid .injury {
      flex-direction: row-reverse;
      grid-gap: 3rem;
      gap: 3rem
  }
    }

.product-injuries-grid .injury:nth-child(2n) {
      background: var(--color-turqoise-200);
      background: var(--injuries-grid-background-alt);
    }

.product-injuries-grid .injury-image {
    flex: 1 1 30%;
  }

@media (min-width: 768px) {

.product-injuries-grid .injury-image {
      display: flex;
      align-items: center;
      justify-content: center
  }
    }

.product-injuries-grid .injury-image img {
      -o-object-fit: cover;
         object-fit: cover;
    }

@media (min-width: 768px) {

.product-injuries-grid .injury-image img {
        height: 100%
    }
      }

.product-injuries-grid .injury-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    padding: clamp(1.5rem, 5vw, 3rem);
    padding: var(--injuries-grid-padding);
  }

.product-injuries-grid .injury-content .link {
      margin-top: auto;
    }

.product-injuries-grid svg {
    transform: rotate(-90deg);
    margin-left: 0.25rem;
  }