/* Keep the expectations section balanced at tablet widths. */
@media (min-width: 641px) and (max-width: 800px) {
  .perks { grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; }
  .perks h2 { font-size: clamp(46px, 7vw, 62px); line-height: .9; }
  .perks-list p { display: flex; padding: 14px 0; }
  .perks-list span { display: block; margin: 0; }
}
@media (max-width: 640px) {
  .perks h2 { font-size: 52px; line-height: .9; }
  .contacts .contact-grid { grid-template-columns: 1fr; }
}
.contacts .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero h1 { font-size: clamp(54px, 6.4vw, 94px); letter-spacing: -.02em; line-height: .94; }
.hero-panel { transform: none; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); box-shadow: 22px 22px 0 rgba(39,88,201,.28); }
.hero-panel .sun { width: 150px; height: 150px; margin: 10px auto; border: 2px solid #00053e; border-radius: 50%; display: grid; place-items: center; font: 800 20px "Barlow Condensed", sans-serif; letter-spacing: 2px; }
.hero-panel .scribble { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.hero .intro { color: rgba(255,255,255,.86); }
@media (max-width: 640px) {
  .contacts .contact-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 50px; }
  .hero-panel { box-shadow: 10px 10px 0 rgba(39,88,201,.28); }
}