.media-list-section {
  padding: clamp(72px, 9vw, 118px) max(5vw, 26px);
  background-color: #fff;
  background-image: radial-gradient(rgba(66, 172, 216, .1) .75px, transparent .75px);
  background-size: 17px 17px;
}

.media-empty {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(54px, 8vw, 82px) clamp(28px, 6vw, 64px);
  text-align: center;
  background: rgba(255, 255, 255, .93);
  border: 1px solid #d7ecf3;
  border-radius: 64px 8px 64px 8px;
  box-shadow: var(--shadow);
}

.media-empty span {
  display: block;
  margin-bottom: 16px;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.media-empty h2 { margin-bottom: 14px; }
.media-empty p { margin-bottom: 0; color: var(--ink-soft); }

.media-grid {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 36px);
}

.media-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border: 1px solid #d7ecf3;
  border-radius: 38px 7px 38px 7px;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s;
}

.media-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(36, 127, 169, .15); }
.media-card-image { aspect-ratio: 1.45 / 1; display: grid; place-items: center; overflow: hidden; background: var(--blue-mist); }
.media-card-image img { width: 100%; height: 100%; object-fit: cover; }
.media-card-copy { padding: 25px 24px 27px; }
.media-card-meta { margin-bottom: 13px; display: flex; justify-content: space-between; gap: 14px; color: var(--blue-deep); font-size: 10px; font-weight: 700; }
.media-card-copy h2 { margin-bottom: 11px; font-size: 19px; }
.media-card-copy p { color: var(--ink-soft); font-size: 13px; }
.media-card-copy b { color: var(--blue-deep); font-size: 11px; letter-spacing: .06em; }
.media-showcase img { max-height: 620px; object-fit: contain; }
.media-article > div { grid-template-columns: 1fr; }
.media-article article { width: min(100%, 820px); margin: 0 auto; }

@media (max-width: 540px) {
  .media-list-section { padding: 62px 22px; }
  .media-empty { border-radius: 42px 6px 42px 6px; }
  .media-grid { grid-template-columns: 1fr; }
}

@media (min-width: 541px) and (max-width: 900px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}