.hero {
  row-gap: var(--grid-gap);
  .hero_text {
    align-self: center;
    @media (min-width: 60rem) {
      grid-column: span 6 / span 6;
    }
    @media (min-width: 80rem) {
      grid-column: span 4 / span 4;
    }
  }

  .hero_video {
    margin-inline: calc(-1 * var(--container-x));
    video {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .progress-bar {
      height: 0.75rem;
      background-color: var(--c-green);
      .progress {
        --progress: 0%;
        height: 100%;
        background-color: var(--c-title);
        width: var(--progress);
        transition: width 250ms linear;
      }
    }
    @media (min-width: 60rem) {
      grid-column: span 6 / span 6;
      margin-left: 0;
      margin-block: calc(-1 * var(--container-y));
    }
    @media (min-width: 80rem) {
      grid-column: span 8 / span 8;
    }
  }
}

.dual {
  align-items: center;
  row-gap: var(--grid-gap);
  .img,
  .text {
    @media (min-width: 60rem) {
      grid-column: span 6 / span 6;
    }
  }
  .img {
    img {
      max-height: 16rem;
    }
  }
}
.expertise {
  .img {
    @media (min-width: 60rem) {
      order: -1;
    }
  }
}

.features-list {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: var(--grid-gap);
  .feature {
    display: grid;
    grid-template-rows: subgrid;
    grid-column: 1 / -1;
    grid-row: span 3 / span 3;
    row-gap: 0;
    text-align: center;
    svg {
      display: block;
      margin-inline: auto;
      width: 4rem;
    }
    h3 {
      align-self: center;
    }
    @media (min-width: 40rem) {
      grid-column: span 6 / span 6;
    }
    @media (min-width: 60rem) {
      grid-column: span 3 / span 3;
    }
  }
}
.product-cats {
  h2 {
    text-align: center;
  }
  .categories-list {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: var(--grid-gap);
    .category {
      grid-column: 1 / -1;
      grid-row: span 3;
      text-align: center;
      h3.il-button {
        font-size: inherit;
        font-family: inherit;
      }
      @media (min-width: 20rem) {
        grid-column: 2 / -2;
      }
      @media (min-width: 40rem) {
        grid-column: 3 / -3;
      }
      @media (min-width: 60rem) {
        grid-column: span 4 / span 4;
      }
    }
  }
}

.universe {
  box-shadow: inset 0 0 0.5rem color(from var(--c-mapped-blue) srgb r g b / 0.5);
  h2 {
    text-align: center;
  }
  .text {
    @media (min-width: 40rem) {
      grid-column: span 10 / span 10;
      grid-column-start: 2;
    }
    @media (min-width: 60rem) {
      grid-column: span 8 / span 8;
      grid-column-start: 3;
    }
    @media (min-width: 80rem) {
      grid-column: span 6 / span 6;
      grid-column-start: 4;
    }
  }
  .il-button {
    margin-inline: auto;
  }
}