Block link teaser tests

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/publik-variable.css">
<div class="teasers">

  <div class="teaser">
    <a href="#" class="teaser__link teaser__link--2-column-large-lg">
      <h3 class="teaser__title teaser__title--xx-large">William James Murray</h3>
      <div class="teaser__media">
        <img src="https://fillmurray.lucidinternets.com/800/450" alt="Groundhog Day"/>
      </div>
      <span class="teaser__meta">American actor</span>
    </a>
    <ul class="teaser__related">
      <li><a href="#">Lost in Translation</a></li>
      <li><a href="#">Zombieland</a></li>
    </ul>
  </div>

  <div class="teaser">
    <a href="#" class="teaser__link teaser__link--2-column-xxs teaser__link--2-column-small-sm teaser__link--2-column-left-md" style="--layout-xxs: var(--2-column); --layout-sm: var(--2-column-small);">
      <h3 class="teaser__title">William James Murray</h3>
      <div class="teaser__media">
        <img src="https://fillmurray.lucidinternets.com/800/800"  alt="Lost in translation" />
      </div>
      <!--span class="teaser__meta teaser__meta--compact">American actor</span-->
      <p class="teaser__summary">An American actor, comedian and writer. Known for his deadpan delivery,[2] he first rose to fame on Saturday Night Live, a series of performances that earned him his first Emmy Award.</p>
    </a>
  </div>

  <div class="teaser">
    <a href="#" class="teaser__link teaser__link--2-column-spot-xxs">
      <h3 class="teaser__title teaser__title--x-large"><strong>Bill Murray:</strong> <span>&quot;I like to eat goldfish as they are high in protein&quot;</span></h3>
      <div class="teaser__media">
        <img src="https://fillmurray.lucidinternets.com/800/600"  alt="Bill eating a goldfish"/>
      </div>
      <span class="teaser__meta">Recipes for disaster</span>
      <div class="teaser__background teaser__background--2-column-spot">
      
      </div>
    </a>
  </div>

</div>

SCSS

$breakpoints: (
  xxs: 0,
  xs: 15rem,
  sm: 30rem,
  md: 45rem,
  lg: 60rem,
  xl: 75rem
);

body {
  font-family: 'Publik';
}

.teasers {
  display: grid;
  grid-template-rows: repeat(1fr);
  row-gap: 2rem;
  margin: 2rem auto;
  max-width: calc(600 / 16 * 1rem);
}

.teaser {
  
  @mixin layout-2-column {
    /* 2 column layout
    + right aligned image */
    grid-template-areas:
      "title   media"
      "meta    media"
      ".       media"
      "summary media"
      ".       media";
    grid-template-rows: min-content min-content 1fr min-content 1fr;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  
  @mixin layout-2-column-large {
    /* 2 column layout
    + large left aligned image */
    grid-template-areas:
      "media title"
      "media meta"
      "media summary"
      "media .";
    grid-template-rows: repeat(3, min-content) 1fr;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem;
  }
  
  @mixin layout-2-column-small {
    /* 2 column layout
    + right aligned image */
    grid-template-areas:
      "title   media"
      "meta    media"
      "summary media"
      ".       media";
    grid-template-rows: repeat(3, min-content) 1fr;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem;
  }
  
  @mixin layout-2-column-left {
    /* 2 column layout
    + left aligned image */
    grid-template-areas:
      "media title"
      "media meta"
      "media summary"
      "media .";
    grid-template-rows: repeat(3, min-content) 1fr;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  
  @mixin layout-2-column-spot {
    /* 2 column layout
    + left aligned image
    + meta aligned to bottom */
    grid-template-areas:
      "media title"
      "media summary"
      "media ."
      "media meta";
    grid-template-rows: repeat(2, min-content) 1fr min-content;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  
  &__link {
    display: grid;
    text-decoration: none;
    /* Default single column...