.collaboration {
  background: var(--ink);
  color: #fff;
}

.collaboration .kicker {
  color: #e6b75f;
}

.collaboration .row-heading > p {
  color: #b8c4ce;
}

.collaboration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.collaboration-grid article {
  min-height: 330px;
  padding: 34px;
  border: 1px solid #476078;
  display: flex;
  flex-direction: column;
}

.collaboration-grid article > p:first-child {
  color: #e6b75f;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.collaboration-grid h3 {
  margin: 35px 0 16px;
  font: 30px/1.15 Georgia, serif;
}

.collaboration-grid h3 + p {
  color: #b8c4ce;
}

.collaboration-grid a {
  margin-top: auto;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

.collaboration-grid a span {
  float: right;
  color: var(--gold);
}

.topics-panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 45px;
  margin-top: 55px;
  padding-top: 35px;
  border-top: 1px solid #476078;
}

.topics-panel span,
.topics-panel strong {
  display: block;
}

.topics-panel span {
  color: #e6b75f;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.topics-panel strong {
  margin-top: 8px;
  font: 24px/1.35 Georgia, serif;
}

.topics-panel ul {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.topics-panel li {
  padding: 8px 13px;
  border: 1px solid #60758a;
  font-size: 12px;
}

.videos {
  background: var(--cream);
}

.video-slider + .video-slider {
  margin-top: 70px;
}

.video-slider .slider-toolbar h3 {
  margin: 0;
  font: 30px Georgia, serif;
}

.video-slider .slider-toolbar button {
  color: var(--ink);
  border-color: var(--ink);
}

.video-track {
  scrollbar-color: var(--rust) var(--line);
}

.video-card {
  flex: 0 0 min(560px, 82vw);
  scroll-snap-align: start;
}

.video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #071b2c;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card > a,
.video-channel-link a {
  display: inline-block;
  margin-top: 13px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

.video-card > a span,
.video-channel-link span {
  color: var(--rust);
}

.video-channel-link {
  margin: 45px 0 0;
  text-align: right;
}

@media (max-width: 760px) {
  .collaboration-grid,
  .topics-panel {
    grid-template-columns: 1fr;
  }

  .collaboration-grid article {
    min-height: 285px;
  }

  .video-card {
    flex-basis: 88vw;
  }
}