.podcast__masthead {
  position: relative;
  width: 100%;
  height: 16rem;
  --masthead-image-set: var(--masthead-image-set-mobile);
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 90%)),
    var(--masthead) center / cover;
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 90%)),
    var(--masthead-image-set) center / cover;
}

.podcast__wrapper {
  --gap: 1rem;
  --cover-size: 16rem;
  --header-row-size: calc((var(--cover-size) - var(--gap)) / 2);
  display: grid;
  margin-top: calc(var(--cover-size) / -2);
  gap: var(--gap);
  align-items: stretch;
}

.podcast__cover {
  width: var(--cover-size);
  height: var(--cover-size);
  filter: drop-shadow(0 0 0.75rem black);
  aspect-ratio: 1;
}

.podcast__episodes-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(calc(6rem + 32ch), 100%), 1fr)
  );
  list-style: none;
  margin: 0;
  padding: 0;
}

.podcast__episodes-listitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  position: relative;
}

.podcast__episodes-listitem-thumbnail {
  width: 6rem;
  height: 6rem;
}

.podcast__episodes-listitem-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  gap: 0.1rem;
}

.podcast__episodes-listitem-details > div > a::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}

.podcast__episodes-listitem-details > div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.podcast__episodes-listitem-details > div > time {
  font-size: 0.8em;
}

.podcast__episodes,
.podcast__episode {
  margin-block-end: 4rem;
}

.podcast__episode {
  width: min(calc(16rem + 65ch), 100%);
}

.podcast__episode-title-group {
  z-index: 1;
  position: relative;
  display: grid;
  align-items: end;
}

.podcast__title,
.podcast__episode-title {
  width: fit-content;
  font-weight: 900;
  font-family: proxima-nova, sans-serif;
  margin: 0;
}

.podcast__title {
  font-size: 2.5em;
}

.podcast__episode-date,
.podcast__episode-subtitle {
  margin: 0;
}

.podcast__episode-date {
  font-style: italic;
  font-size: 0.8em;
}

.podcast__episode-player-caption-wrapper {
  height: 3em;
  z-index: 1;
  position: relative;
}

.podcast__episode-player-group {
  display: grid;
}

.podcast__episode-player-caption {
  font-family: monospace;
  background-color: black;
  color: white;
}

.podcast__services {
  display: flex;
  flex-direction: column;
}

.podcast__services p {
  margin-block: 0.5rem;
}

.podcast__services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.podcast__service {
  width: 3rem;
  height: 3rem;
  display: flex;
  background: var(--brand-color);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.podcast__services h2 {
  color: rgb(50 87 129);
  font-family: proxima-nova-condensed;
  font-weight: bold;
  font-size: 1.5rem;
}

@media (width >= 48rem) {
  .podcast__masthead {
    --masthead-image-set: var(--masthead-image-set-desktop);
  }
  .podcast__wrapper {
    --gap: 1.5rem;
    grid-template-columns: 16rem 1fr;
    grid-template-rows: repeat(2, var(--header-row-size));
    grid-auto-rows: auto;
  }

  .podcast__cover {
    grid-row: 1 / span 2;
  }

  .podcast__episode-title-group {
    color: white;
    grid-row: 1;
    grid-column: 2;
  }

  .podcast__episode-subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }

  .podcast__episode-player-group {
    grid-row: 2;
    grid-column: 2;
  }

  .podcast__services {
    grid-column: 1;
    height: 0;
  }

  .podcast__episode-body {
    grid-row: 3;
    grid-column: 2;
  }

  .podcast__body {
    grid-row: 2 / span 2;
    grid-column: 2;
  }

  .podcast__episodes-list {
    grid-row: 4;
    grid-column: 2;
  }
}

@media not prefers-reduced-motion {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 500ms;
  }
}