@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Oswald:wght@500;600;700&display=swap");
.media-hero {
  padding: 95px 0 85px;
  color: #fff;
}
.media-hero h1,
.media-title {
  font:
    600 clamp(52px, 7vw, 90px)/0.9 Oswald,
    sans-serif;
  text-transform: uppercase;
  margin: 16px 0;
}
.media-hero em,
.media-title em {
  font-style: normal;
  color: #55d4ff;
}
.media-hero p:last-child {
  font: 17px "DM Sans";
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.media-grid article {
  background: #fff;
  padding: 30px;
  min-height: 220px;
  border-top: 4px solid #00a9e8;
}
.media-grid span {
  font: 700 10px "DM Sans";
  letter-spacing: 0.13em;
  color: #0879ad;
}
.media-grid h3 {
  font:
    600 29px/1 Oswald,
    sans-serif;
  text-transform: uppercase;
}
.media-grid p {
  font: 14px/1.6 "DM Sans";
  color: #5c7482;
}
.media-grid a {
  font: 700 13px "DM Sans";
  color: #00a9e8;
}
@media (max-width: 700px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
}