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

@use "sass:map";

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


$breakpoint-keys: map.keys($breakpoints);

@function media-min-width($min-width, $not: false) {
  @if ($min-width > 0) {
    $condition: "(min-width: #{$min-width})";
    @if ($not) {
      @return "not all and #{$condition}";
    }
    @return $condition;
  }
  @return null;
}

// A mixin to wrap content given a condition.
@mixin media-wrap($condition: null) {
  @if ($condition) {
    @media #{$condition} {
      @content;
    }
  }
  @else {
    @content;
  }
}

@function breakpoint-min-width($bp, $not: false) {
  $min-width: if(map-has-key($breakpoints, $bp), map.get($breakpoints, $bp), 0);
  @return media-min-width($min-width, $not);
}

@mixin breakpoint($from-bp: xxs, $to-bp: null) {
  @include media-wrap(breakpoint-min-width($from-bp)) {
    @include media-wrap(breakpoint-min-width($to-bp, true)) {
      @content;
    }
  }
}

@mixin breakpoints($bps: $breakpoint-keys) {
  @each $bp in $bps {
    @include breakpoint($bp) {
      @content($bp);
    }
  }
}

@mixin cascading-variables-reset($variable, $bps: (xs, sm, md, lg, xl)) {
  @each $bp in $bps {
    // Reseting xxs variables should never be needed.
    @if ($bp != xxs) {
      @include breakpoint(null, $bp) {
        // Reset inline variables before the breakpoint they should be active in.
        #{$variable}--#{$bp}: initial !important;
      }
    }
  }
}

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;
  }
  
 ...