/* ==========================================================================
    This file describes grid layouts for groups of teasers
   ========================================================================== */

/* ==========================================================================
    General styles
   ========================================================================== */


.dm-teaserCluster {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2rem;
  grid-column-gap: 2rem;
}

@media (min-width: 768px) {

}

/* ==========================================================================
    TeaserCluster Layout2 ArticleRecommendation
   ========================================================================== */

.dm-teaserCluster--layout2 .dm-adSlotNative4 { grid-area: native4; }
.dm-teaserCluster--layout2 .dm-adSlotNative5 { grid-area: native5; }

.dm-teaserCluster--layout2 {
  content-visibility: auto;
  contain-intrinsic-size: 313px;
  grid-template-areas: "."
                       "native4"
                       "."
                       "native5"
                       "."
                       "."
                       ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--layout2  {
    max-width: 862px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    contain-intrinsic-size: 356px;
  }

  .dm-teaserCluster--layout2 > * { margin-bottom: 2rem; } /* let's use margin instead */

  .dm-teaserCluster--layout2 {
    grid-template-areas: ".               ."
                         "native4   native5"
                         ".               ."
                         ;
  }

}


/* ==========================================================================
    TeaserCluster Layout 4 Homepage/Tag
   ========================================================================== */

/* We elevate the teasers from teaserList so they can flow into the same grid like sidebar and adslots. */
.dm-teaserCluster--layout4 .dm-teaserList {
  display: contents;
}

.dm-teaserCluster--layout4 .dm-sidebar { grid-area: sidebar; }
.dm-teaserCluster--layout4 .dm-adSlotMobilePos2 { grid-area: adslotmobil2; }
.dm-teaserCluster--layout4 .dm-adSlotMobilePos3 { grid-area: adslotmobil3; }
.dm-teaserCluster--layout4 .dm-adSlotNative1 { grid-area: native1; }
.dm-teaserCluster--layout4 .dm-adSlotNative2 { grid-area: native2; }
.dm-teaserCluster--layout4 .dm-adSlotNative3 { grid-area: native3; }

.dm-teaserCluster--layout4 {
  grid-template-areas: "."
                       "adslotmobil2"
                       "."
                       "."
                       "native1"
                       "."
                       "."
                       "adslotmobil3"
                       "sidebar"
                       "."
                       "native2"
                       "."
                       "."
                       "."
                       "native3"
                       ;
}

@media (min-width: 768px) {

  /* On desktop the teaserList is a grid item and contains a subgrid. */
  .dm-teaserCluster--layout4 {
    padding: 2rem;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "teaserList sidebar"
  }

  .dm-teaserCluster--layout4 .dm-teaserList {
    grid-area: teaserList;
    display: grid;
    grid-row-gap: 2rem;
    grid-template-areas:
      ".      "
      ".      "
      ".      "
      "native1"
      ".      "
      ".      "
      ".      "
      "native2"
      ".      "
      ".      "
      ".      "
      "native3"
      ;
  }
}