.media-grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: var(--grid-shape);

  a {
    aspect-ratio: var(--aspect-ratio);

    img {
      border-color: var(--section-color);
    }
  }

  &:not(:has(a)) img {
    border: var(--border-gray);
  }

  & + .media-grid {
    margin-top: var(--spacing-sm);
  }

  &.vertical {
    --grid-shape: var(--grid-vertical);

    a {
      --aspect-ratio: var(--aspect-ratio-vertical);
    }
  }

  img {
    width: var(--sizing-full);
    height: auto;
  }

  .media-grid-item {
    position: relative;
    border-radius: var(--border-radius-slight);
  }

  .meta-text {
    position: absolute;
    z-index: 2;
    left: var(--spacing-sm);
    bottom: var(--spacing-sm);
    max-width: calc(var(--sizing-full) - calc(var(--spacing-sm) * 2));

    .header,
    .subheader {
      line-height: var(--line-height-md);
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .header {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .subheader {
      font-size: var(--font-size-xs);
    }
  }
}