.section-grid {
  padding: var(--spacing-xl) var(--spacing-m);
  gap: var(--spacing-m);
  row-gap: var(--spacing-xl);
  display: grid;
  flex-direction: column;
  position: relative;
  overflow: clip;
}

.grid-block {
  position: relative;
}
.grid-block:has(.caption-left),
.grid-block:has(.lean-right) {
  margin-left: auto;
}

@media (max-width: 900px) {
  .grid-block {
    width: 80%;
  }
  .grid-block[data-width="small"] {
    width: 50%;
  }
  .grid-block[data-width="large"] {
    width: 100%;
  }
  .grid-block:has(.grid-centered) {
    width: 100%;
  }
}

.grid-textblock {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-m-size);
    line-height: var(--font-m-height);
    max-width: 45ch;
  }

  p:not(:first-child) {
    padding-left: calc(100vw / 12 - var(--spacing-xs));
    max-width: 60ch;
  }
}

.grid-block img,
.grid-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure {
  position: relative;

  figcaption {
    padding-block: var(--spacing-s);
    counter-increment: figures; /* count the number of fig captions */
  }
  figcaption::before {
    content: "Fig " counter(figures) ". "; /* display the figure number */
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.75em;
    line-height: 1em;
    margin-top: 0.5em;
  }
}

body {
  counter-reset: figures; /* Set the figure counter */
}

@media (min-width: 900px) {
  .section-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: var(--spacing-xxl);
    padding-block: var(--spacing-xxl);
  }
  .grid-block {
    grid-column: var(--start) / var(--end);
    grid-row: var(--row);
    align-self: var(--align, center);
    margin-bottom: var(--bottom);
    margin-top: var(--top);
    min-width: 0;
    min-height: 0;
    width: 100%;
  }
  .figure figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    writing-mode: sideways-lr;
  }
  .figure.caption-left figcaption {
    left: auto;
    right: 100%;
  }
}