/* horizontal teaser mobile */
.dm-teaser--horizontal {
  font-size: var(--articleTextSize);
  grid-template-columns: 1.1rem 1.1rem 4.3fr 1fr 0 minmax(0, 5fr);
  grid-template-rows: min-content min-content min-content min-content 1fr;
  grid-template-areas:
    "date       date      date     date    date   anzeige   "
    "over       over      over     over    over   over      "
    "hl         hl        hl       hl      .      figure    "
    "author     author    author   social  .      figure    "
}

/* horizontal teaser mobile incl. icon */
.dm-teaser--horizontal.dm-teaser--kplus,
.dm-teaser--horizontal.dm-teaser--external {
  grid-template-areas:
    "date       date      date     date    date   anzeige   "
    "icon       over      over     over    over   over      "
    "hl         hl        hl       hl      .      figure    "
    "author     author    author   social  .      figure    "
}

/* horizontal teaser mobile opinion */
.dm-teaser--horizontal.dm-teaser--opinion {
  grid-template-areas:
    "date       date      date     date    date   anzeige   "
    "over       over      over     over    over   over      "
    "hl         hl        hl       hl      .      figure    "
    "portrait   portrait  author   social  .      figure    "
}

/* horizontal teaser mobile opinion & icon*/
.dm-teaser--horizontal.dm-teaser--opinion.dm-teaser--kplus {
  grid-template-areas:
    "date       date      date     date    date   anzeige   "
    "icon       over      over     over    over   over      "
    "hl         hl        hl       hl      .      figure    "
    "portrait   portrait  author   social  .      figure    "
}



@media (min-width: 768px) {

  /* horizontal teaser desktop */
  .dm-teaser--horizontal {
    grid-template-columns: 1.1rem 3.5rem 4.3fr 1fr 0 minmax(0, 5fr);
    grid-template-areas:
      "date       date      date      date      .         anzeige"
      "over       over      over      over      .         figure"
      "hl         hl        hl        hl        .         figure"
      "intro      intro     intro     intro     .         figure"
      "author     author    author    social    .         figure";
  }

  /* horizontal teaser desktop incl. icon */
  .dm-teaser--horizontal.dm-teaser--kplus,
  .dm-teaser--horizontal.dm-teaser--external {
    grid-template-areas:
      "date       date      date      date      .         anzeige"
      "icon       over      over      over      .         figure"
      "hl         hl        hl        hl        .         figure"
      "intro      intro     intro     intro     .         figure"
      "author     author    author    social    .         figure";
  }

  /* horizontal teaser dektop opinion */
  .dm-teaser--horizontal.dm-teaser--opinion {
    grid-template-areas:
      "date       date      date      date      .         anzeige"
      "over       over      over      over      .         figure"
      "hl         hl        hl        hl        .         figure"
      "portrait   portrait  intro     intro     .         figure"
      "author     author    author    social    .         figure";
  }

  /* horizontal teaser dektop opinion & icon*/
  .dm-teaser--horizontal.dm-teaser--opinion.dm-teaser--kplus {
    grid-template-areas:
      "date       date      date      date      .         anzeige"
      "icon       over      over      over      .         figure"
      "hl         hl        hl        hl        .         figure"
      "portrait   portrait  intro     intro     .         figure"
      "author     author    author    social    .         figure";
  }

  .dm-teaser--horizontal .dm-teaser__intro {
    display: block;
  }
}