/* ==========================================================================
    TeaserCluster 1: curated cluster
   ========================================================================== */

.dm-teaserCluster--home-1 .dm-slot--mob_top:nth-of-type(1) {grid-area: mob_top1;}
.dm-teaserCluster--home-1 .dm-slot--mob_top:nth-of-type(2) {grid-area: mob_top2;}
.dm-teaserCluster--home-1 .dm-slot--mob_native { grid-area: mob_native; }
.dm-teaserCluster--home-1 .dm-slot--bb_top { grid-area: bb_top; }
.dm-teaserCluster--home-1 .dm-slot--little_local { grid-area: little_local; }
.dm-teaserCluster--home-1 .dm-teaser:first-of-type { grid-area: teaserL; }
.dm-teaserCluster--home-1 .dm-teaser:nth-of-type(8) { grid-area: teaserLEnd; }
.dm-teaserCluster--home-1 .dm-headlinesBox { grid-area: headlinesBox; }

.dm-teaserCluster--home-1 {
  grid-template-areas: "teaserL"
                       "mob_top1"
                       "headlinesBox"
                       "."
                       "."
                       "."
                       "mob_native"
                       "."
                       "."
                       "."
                       "teaserLEnd"
                       "mob_top2 "
                       ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "teaserL    teaserL     headlinesBox"
      "bb_top     bb_top      bb_top"
      ".          .           ."
      "little_local  .           ."
      ".          teaserLEnd  teaserLEnd"
      ".          teaserLEnd  teaserLEnd"
      ;
  }
}


/* ==========================================================================
    TeaserCluster 2: Köln
   ========================================================================== */

.dm-teaserCluster--home-2 .dm-teaserClusterHeadline { grid-area: hl; }
.dm-teaserCluster--home-2 .dm-slot--native { grid-area: native; }
.dm-teaserCluster--home-2 .dm-slot--mob_native { grid-area: mob_native; }
.dm-teaserCluster--home-2 .dm-teaser:first-of-type { grid-area: teaserL; }

.dm-teaserCluster--home-2 {
  grid-template-areas:  "hl"
                        "teaserL"
                        "."
                        "."
                        "mob_native"
                        "."
                        "."
                        ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "hl       hl        hl"
      "teaserL  teaserL   native"
      "teaserL  teaserL   ."
      ".        .         ."
      ;
  }
}

/* ==========================================================================
    TeaserCluster 4
   ========================================================================== */

.dm-teaserCluster--home-4 .dm-teaserClusterHeadline { grid-area: hl; }
.dm-teaserCluster--home-4 .dm-teaser:nth-of-type(1) { grid-area: teaserL; }
.dm-teaserCluster--home-4 .dm-slot--mob_top { grid-area: mob_top; }
.dm-teaserCluster--home-4 .dm-slot--middle { grid-area: middle; }


.dm-teaserCluster--home-4 {
  grid-template-areas: "hl"
                      "teaserL"
                      "."
                      "."
                      "mob_top"
                      "."
                      "."
                      ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "hl         hl          hl"
      "teaserL    teaserL     middle"
      ".           .          middle"
      ".           .          ."
      ;
  }
}

/* ==========================================================================
    TeaserCluster 5
   ========================================================================== */

   .dm-teaserCluster--home-5 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-5 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-5 .dm-slot--mob_native { grid-area: mob_native; }


   .dm-teaserCluster--home-5 {
     grid-template-areas: "hl"
                         "."
                         "mob_native"
                         "."
                         ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-5 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         ".          native     ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 6
   ========================================================================== */

   .dm-teaserCluster--home-6 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-6 .dm-slot--mob_native { grid-area: mob_native; }


   .dm-teaserCluster--home-6 {
     grid-template-areas: "hl"
                         "."
                         "."
                         "."
                         "mob_native"
                         ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-6 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         ".          .            ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 7
   ========================================================================== */

   .dm-teaserCluster--home-7 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-7 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-7 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-7 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-7 {
     grid-template-areas:  "hl"
                           "teaserL"
                           "."
                           "."
                           "."
                           "mob_native"
                           "."
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-7 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "teaserL  teaserL   ."
         "teaserL  teaserL   native"
         ".        .         ."
         ;
     }
   }

/* ==========================================================================
    TeaserCluster 8
   ========================================================================== */

   .dm-teaserCluster--home-8 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-8 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-8 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-8 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-8 {
     grid-template-areas:  "hl"
                           "teaserL"
                           "mob_native"
                           "."
                           "."
                           "."
                           "."
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-8 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "teaserL  teaserL   ."
         "teaserL  teaserL   ."
         "native   .         ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 9
   ========================================================================== */

   .dm-teaserCluster--home-9 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-9 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-9 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-9 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-9 {
     grid-template-areas:  "hl"
                           "teaserL"
                           "."
                           "."
                           "."
                           "."
                           "mob_native"
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-9 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "teaserL  teaserL   ."
         "teaserL  teaserL   ."
         ".        .         native"
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 10
   ========================================================================== */

   .dm-teaserCluster--home-10 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-10 {
     grid-template-areas: "hl"
                          "."
                          "."
                          "."
                          ;
   }
   @media (min-width: 768px) {
     .dm-teaserCluster--home-10 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         ".          .            ."
         ;
     }
   }

/* ==========================================================================
    TeaserCluster 11: Ratgeber
  ========================================================================== */

    .dm-teaserCluster--home-11 .dm-teaserClusterHeadline { grid-area: hl; }
    .dm-teaserCluster--home-11 .dm-slot--native:nth-of-type(1) { grid-area: native; }
    .dm-teaserCluster--home-11 .dm-slot--native:nth-of-type(2) { grid-area: native2; }
    .dm-teaserCluster--home-11 .dm-slot--mob_native { grid-area: mob_native; }
    .dm-teaserCluster--home-11 .dm-slot--mob_top { grid-area: mob_top; }
    .dm-teaserCluster--home-11 .dm-teaser:first-of-type { grid-area: teaserL; }

    .dm-teaserCluster--home-11 {
      grid-template-areas:  "hl"
                            "teaserL"
                            "mob_native"
                            "."
                            "."
                            "mob_top"
                            "."
                            ;
    }

    @media (min-width: 768px) {

      .dm-teaserCluster--home-11 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
                 "hl       hl        hl"
                 "teaserL  teaserL   native"
                 "teaserL  teaserL   ."
                 "native2  .         ."
      ;
      }
    }

/* ==========================================================================
    TeaserCluster 12: Witz des Tages
   ========================================================================== */

    .dm-teaserCluster--home-12 .dm-teaserClusterHeadline { grid-area: hl; }
    .dm-teaserCluster--home-12 .dm-teaser:first-of-type { grid-area: teaserXL; }

    .dm-teaserCluster--home-12 {
      grid-template-areas:  "hl"
                            "teaserXL"
                            ;
    }

    @media (min-width: 768px) {

      .dm-teaserCluster--home-12 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
                     "hl        hl        hl"
                     "teaserXL  teaserXL  teaserXL"
      ;
      }
    }
/* ==========================================================================
    TeaserCluster 14
   ========================================================================== */

   .dm-teaserCluster--home-14 .dm-teaserClusterHeadline { grid-area: hl; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(1) { grid-area: local1; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(2) { grid-area: local2; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(3) { grid-area: local3; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(4) { grid-area: local4; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(5) { grid-area: local5; }
   .dm-teaserCluster--home-14 .dm-slot--local:nth-of-type(6) { grid-area: local6; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(1) { grid-area: mob_local1; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(2) { grid-area: mob_local2; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(3) { grid-area: mob_local3; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(4) { grid-area: mob_local4; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(5) { grid-area: mob_local5; }
   .dm-teaserCluster--home-14 .dm-slot--mob_local:nth-of-type(6) { grid-area: mob_local6; }
   .dm-teaserCluster--home-14 {
     grid-template-areas: "hl"
                          "teaserL"
                          "."
                          "."
                          "mob_local1"
                          "mob_local2"
                          "mob_local3"
                          "mob_local4"
                          "mob_local5"
                          "mob_local6"
                          ;
   }
   @media (min-width: 768px) {
     .dm-teaserCluster--home-14 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl        hl          hl"
         ".         .            ."
         "local1    local2      local3"
         "local4    local5      local6"
         ;
     }
   }



/* ==========================================================================
    SuperCluster Example that combines 2 teaserClusters
   ========================================================================== */

   /*
   .dm-teaserCluster--2 { grid-area: tc2; }
   .dm-teaserCluster--3 { grid-area: tc3; }

   .dm-superCluster--A {
     grid-template-areas:
     "tc3"
     "tc2"
     ;
   }

   @media (min-width: 768px) {
     .dm-superCluster--A {
       grid-template-columns: 2fr 1fr;
       grid-template-areas:
         "tc2 tc3"
         ;
     }
   }

   */