.block-tile-layout {
  .tiles {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(12, 1fr);

    .card {
      grid-column: span var(--tile-col-span, 12);
      grid-row: span var(--tile-row-span, 1);

      .tile-link {
        display: block;
        object-fit: cover;
        height: 100%;
        width: 100%;
      }

      img.card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      @media (min-width: 768px) {
        &.tile-col-span-1  { --tile-col-span: 1; }
        &.tile-col-span-2  { --tile-col-span: 2; }
        &.tile-col-span-3  { --tile-col-span: 3; }
        &.tile-col-span-4  { --tile-col-span: 4; }
        &.tile-col-span-5  { --tile-col-span: 5; }
        &.tile-col-span-6  { --tile-col-span: 6; }
        &.tile-col-span-7  { --tile-col-span: 7; }
        &.tile-col-span-8  { --tile-col-span: 8; }
        &.tile-col-span-9  { --tile-col-span: 9; }
        &.tile-col-span-10 { --tile-col-span: 10; }
        &.tile-col-span-11 { --tile-col-span: 11; }
        &.tile-col-span-12 { --tile-col-span: 12; }
        &.tile-row-span-1  { --tile-row-span: 1; }
        &.tile-row-span-2  { --tile-row-span: 2; }
        &.tile-row-span-3  { --tile-row-span: 3; }
        &.tile-row-span-4  { --tile-row-span: 4; }
        &.tile-row-span-5  { --tile-row-span: 5; }
        &.tile-row-span-6  { --tile-row-span: 6; }
        &.tile-row-span-7  { --tile-row-span: 7; }
        &.tile-row-span-8  { --tile-row-span: 8; }
        &.tile-row-span-9  { --tile-row-span: 9; }
        &.tile-row-span-10 { --tile-row-span: 10; }
      }
    }
  }
}