// This layout is used for podcast teaser

.teaser-page-layout {
  margin-right: auto;
  margin-bottom: $spacer-md;
  margin-left: auto;
  width: 95%;
  max-width: $grid-page-layout-width;
}

.podcast-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: $spacer-sm;
  grid-auto-rows: 1fr;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .podcast-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .podcast-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .podcast-teaser--avatar--overlay--big {
    grid-column: span 2;
  }
}