.media-section {
  padding-top: clamp(72px, 8vw, 110px);
  border-top: 1px solid rgba(130, 216, 234, .14);
  background: #081723;
}

.media-section-video { background: radial-gradient(ellipse at 85% 30%, rgba(60, 140, 159, .09), transparent 55%), #081723; }
.media-section-podcast { background: radial-gradient(ellipse at 85% 30%, rgba(112, 101, 174, .1), transparent 55%), #0b1727; }
.media-section-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 88px); }
.media-section-copy h2 { margin-bottom: 24px; font-size: clamp(2.25rem, 3.6vw, 4rem); }
.media-section-description { max-width: 580px; margin-bottom: 22px; color: #b5cbd5; font-size: .97rem; line-height: 1.8; }
.media-section-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 19px; color: #9bb6c7; font: 600 .72rem/1.7 var(--mono); }
.media-section-meta span + span { border-left: 1px solid rgba(142, 190, 205, .3); padding-left: 18px; }
.media-section-link { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; padding-block: 10px; color: #bcecdf; font-size: .91rem; font-weight: 650; text-decoration: none; }
.media-section-link > span { color: var(--aqua); font-size: 1.2rem; }
.media-section-link:hover { color: #e2fff6; text-decoration: underline; text-underline-offset: 5px; }
.media-section-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.media-section-preview { min-width: 0; padding: 8px; border: 1px solid rgba(130, 216, 234, .2); background: rgba(4, 12, 22, .55); }
.media-section-preview img { width: 100%; height: auto; }
.media-section-preview-podcast { width: min(100%, 330px); justify-self: center; }

@media (max-width: 800px) {
  .media-section-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .media-section-copy h2 { font-size: clamp(2.05rem, 6vw, 3.25rem); }
  .media-section-description { max-width: 660px; }
  .media-section-preview-video { width: min(100%, 560px); }
  .media-section-preview-podcast { width: min(100%, 240px); justify-self: start; }
}

@media (max-width: 480px) {
  .media-section { padding-top: 60px; }
  .media-section-copy h2 { font-size: 2.05rem; }
  .media-section-description { font-size: .91rem; }
  .media-section-preview { padding: 5px; }
  .media-section-preview-podcast { width: min(100%, 210px); }
}