header,
[data-hero],
[data-grid~='overlay'] {
  // Name of the grid area
  --overlay-grid-area: overlay;
  // Placement of items in grid area
  --overlay-placement: center;
  // Controls display of grid
  --overlay-display: grid;
  // Overlay padding
  --overlay-padding: 2rem;
  --overlay-width: 100%;
  --overlay-height: 40vh;
  --overlay-max-height: 500px;
  --overlay-color: currentColor;
  --overlay-content-width: 80%;
  --overlay-gap: 2rem;
  --overlay-bg: whitesmoke;
  --overlay-padding-inline: auto;
  --overlay-padding-block: auto;
  --overlay-margin-inline: auto;
  --overlay-margin-block: auto;

  grid-template-areas: 'overlay';
  display: var(--overlay-display);
  place-items: var(--overlay-placement);
  align-items: var(--overlay-placement);
  min-height: var(--overlay-height);
  width: var(--overlay-width);
  color: var(--overlay-color);
  background-color: var(--overlay-bg);
  min-width: 20rem;
  > * {
    grid-area: overlay;
  }
  > img {
    width: var(--overlay-width);
    // height: auto;
    background-size: contain;
  }
  > div,
  > section {
    --overlay-display: flex;
    max-width: var(--overlay-content-width);
    padding-inline: var(--spc-4);
    margin-inline: var(--overlay-margin-inline);
    gap: var(--overlay-gap);
    text-align: center;
    p {
      width: auto;
      max-width: 60ch;
      font-size: var(--fs-8);
      line-height: 1.4;
    }
    > h1,
    > h2 {
      line-height: var(--header-line-height, 1.1);
      font-weight: 500;
    }

    > h1 {
      font-size: var(--fs-12);
    }
    > h2 {
      font-size: var(--fs-11);
    }
    > h3 {
      font-size: var(--fs-10);
    }

  }
}