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


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

.dm-teaser--vertical.dm-teaser--opinion {
  grid-template-areas:
    "date     date     date     anzeige   anzeige  "
    "figure   figure   figure   figure    figure   "
    ".        .        .        .         .        "
    "over     over     over     over      over     "
    "hl       hl       hl       hl        hl       "
    "portrait portrait author   author    social   "
    "portrait portrait intro    intro     intro    "
}


.dm-teaser--vertical.dm-teaser--kplus.dm-teaser--opinion {
  grid-template-areas:
    "date     date     date     anzeige   anzeige  "
    "figure   figure   figure   figure    figure   "
    ".        .        .        .         .        "
    "icon     over     over     over      over     "
    "hl       hl       hl       hl        hl       "
    "portrait portrait author   author    social   "
    "portrait portrait intro    intro     intro    "
}




@media (min-width: 768px) {

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


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

  .dm-teaser--vertical.dm-teaser--opinion {
    grid-template-areas:
      "anzeige  anzeige  anzeige  anzeige  "
      "figure   figure   figure   figure   "
      ".        .        .        .        "
      "over     over     over     date     "
      "hl       hl       hl       hl       "
      "portrait portrait intro    intro    "
      "portrait portrait author   social   "

  }


  .dm-teaser--vertical.dm-teaser--kplus.dm-teaser--opinion {
    grid-template-areas:
      "anzeige  anzeige  anzeige  anzeige  "
      "figure   figure   figure   figure   "
      ".        .        .        .        "
      "icon     over     over     date     "
      "hl       hl       hl       hl       "
      "portrait portrait intro    intro    "
      "portrait portrait author   social   "
  }

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

}