hugo-theme-termlite/assets/css/050_figures.css

/**********
 * FIGURES
 **********/

.figure {
  grid-column: wide-gutter-start / wide-gutter-end;
}

.figure--main-column {
  grid-column: main-start / main-end;
}

.figure--code {
  grid-column: gutter-start / gutter-end;
}


.figure {
  display: grid;
  grid-template-columns: subgrid;

  &:has(> img:only-child) {
    display: flex;
    justify-content: center;
  }

  &:has(.youtube) {
    display: block;
    grid-template-columns: unset;
  }

  > a:has(img:only-child) {
    grid-column: wide-gutter-start / wide-gutter-end;
  }

  .figure__caption--blockquote {
    font-size: inherit;
    margin-inline-start: var(--space-m);

    blockquote + & {
      margin-block-start: var(--space-m);
    }

    &::before {
      color: var(--text-color-secondary);
      content: "--";
    }
  }
}


.figure :is(img, video) {
  grid-column: wide-gutter-start / wide-gutter-end;
  width: 100%;
}


.figure--small {
  display: flow;
  margin-inline: auto;

  img {
    max-width: 480px;
  }
}


.figure video {
  width: 100%;
}


.figure .youtube {
  width: 100%;

  iframe {
    aspect-ratio: 16 / 9;
    margin-bottom: -3px;
    width: 100%;
  }
}


figcaption {
  color: var(--text-color-secondary);
  font-weight: normal;
  font-size: var(--text-xs);
  grid-column: main-start / main-end;
  letter-spacing: 0.01em;
}


.content-grid > .figure {
  grid-column: unset;
}