/**
 * Mobile
 */

.main {
  display: grid;
  grid-gap: var(--gap);
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--gap) 0;
}

.featured .card:nth-of-type(n+6) figure {
  display: none;
}

.ad.top {
  display: none;
}

/**
 * 2 columns
 */

@media (min-width: 690px) {
  .main {
    padding: var(--gap);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "featured featured"
      "special special"
      "ad1 latest"
      "local sports"
      "ad2 newsletter"
      "food more"
      "depth depth"
      "videos videos"
  }

  .ad.one { grid-area: ad1; } 
  .ad.two { grid-area: ad2; } 
  .featured { grid-area: featured; }
  .food { grid-area: food; } 
  .in-depth { grid-area: depth; } 
  .latest-news { grid-area: latest; } 
  .local-news { grid-area: local; } 
  .more-news { grid-area: more; } 
  .newsletter { grid-area: newsletter; } 
  .special-feature { grid-area: special; }
  .sports { grid-area: sports; } 
  .videos { grid-area: videos; }

  .featured .card:nth-of-type(1) {
    grid-column: span 2;
  }
}

/**
 * 3 columns
 */

@media (min-width: 1020px) {
  .main {
    grid-row-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
      /* "banner banner banner" */
      "latest featured featured"
      "ad1 featured featured"
      "special special special"
      "local sports newsletter"
      "depth depth depth"
      "food more ad2"
      "videos videos videos"
  }

  .ad.top {
    display: block;
    grid-area: banner;
    height: 250px;
  }
}

/**
 * Flyby persona
 */

@media (min-width: 1305px) {
  [persona=flyby] {
    max-width: 1245px;
    grid-column-gap: 15px;
    grid-template-columns: repeat(4, 300px);
    grid-template-areas: 
      "latest featured featured ad1"
      "ad2 featured featured newsletter"
      "sports featured featured food"
      "videos videos videos videos"
      "special special local more"
      "depth depth depth depth";
  }

  [persona=flyby] .featured {
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
  }

  [persona=flyby] .special-feature {
    display: block;
    align-self: flex-start;
  }

  [persona=flyby] .special-feature .card-info {
    padding: 15px;
  }
}