.MediaAttachmentGrid {
  /* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
  margin-top: 1em;
  margin-left: var(--card-pad, 0);
  margin-right: var(--card-pad, 0);
  gap: 4px;
  contain: layout style;

  > :where(img, video, .sensitive-placeholder) {
    max-height: 35vh;
    min-height: 40px;
    min-width: 40px;
    max-width: 100%;
    contain: strict;
    content-visibility: auto;
    background-color: var(--media-color-accent, var(--tutu-color-surface-d));
    border-radius: 2px;
    border: 1px solid var(--tutu-color-surface-d);
    transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);

    &:hover,
    &:focus-visible {
      outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
      border-color: var(--media-color-accent, var(--tutu-color-surface-d));
    }

    object-fit: contain;
  }

  >.sensitive-placeholder {
    display: inline-flex;
    display: inline flex;
    align-items: center;
    justify-content: center;
  }
}

:where(.thread-top, .thread-mid) > .MediaAttachmentGrid {
  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
}