pinafore/routes/_components/status/MediaAttachments.html

<div class={computedClass}
     style="grid-template-columns: repeat({nCols}, 1fr);" >
  {#each mediaAttachments as media}
    <Media {media} {uuid} />
  {/each}
</div>
<style>
  .status-media {
    grid-area: media;
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
    grid-column-gap: 5px;
    grid-row-gap: 5px;

    overflow: hidden;
    max-width: calc(100vw - 40px);
    margin: 10px 10px 10px 5px;
  }

  .status-media.grouped-images {
    grid-area: media-grp;
    border-radius: 6px;
  }

  .status-media.grouped-images > :global(*) {
      padding-bottom: 56.25%;
      width: 100%;
  }

  .status-media.grouped-images.two-cols > :global(*) {
      padding-bottom: calc(112.5% + 5px);
  }

  .status-media.grouped-images.odd-cols > :global(:first-child) {
      grid-row-end: span 2;
      padding-bottom: calc(112.5% + 5px);
      background-color: blue;
  }

  .status-media.status-media-is-sensitive {
    margin: 0;
  }
</style>
<script>
  import Media from './Media.html'
  import { classname } from '../../_utils/classname'

  export default {
    computed: {
      computedClass: ({ sensitive, $largeInlineMedia, oddCols, twoCols }) => classname(
        'status-media',
        sensitive && 'status-media-is-sensitive',
        oddCols && 'odd-cols',
        twoCols && 'two-cols',
        !$largeInlineMedia && 'grouped-images'
      ),
      nCols:
        ({ mediaAttachments, $largeInlineMedia }) => {
          return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1
        },
      oddCols:
        ({ mediaAttachments }) => {
          return (mediaAttachments.length > 1 && (mediaAttachments.length % 2))
        },

      twoCols:
        ({ mediaAttachments }) => {
          return (mediaAttachments.length === 2)
        }
    },
    components: {
      Media
    }
  }
</script>