.formats-intro .title { max-width: 1250px; font-size: clamp(42px, 4vw, 56px); line-height: 1.08; letter-spacing: -.025em; }
.formats-intro .lead { max-width: 970px; }
.formats-intro + .types { margin-top: 36px; }

.types .type {
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 23px rgba(8, 61, 105, .11);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.types .type:after {
  inset: 32% 0 0;
  background: linear-gradient(to bottom, rgba(3, 32, 64, 0), rgba(3, 32, 64, .88) 72%, rgba(3, 32, 64, .94));
  transition: opacity .2s ease;
}

.types .type:hover,
.types .type:focus-visible { transform: translateY(-3px); border-color: #7dcef9; box-shadow: 0 15px 29px rgba(8, 82, 143, .2); outline: none; }
.types .type:hover:after,.types .type:focus-visible:after { opacity: 1; }
.types .type__content { padding: 20px 21px; }
.types .type__content h3 { line-height: 1.16; }
.types .type__content p { color: rgba(255, 255, 255, .94); line-height: 1.42; }
.types .type__content > span:not(.type__badge) { color: #fff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.types .type__badge { display: inline-block; margin: 0 0 8px; padding: 4px 7px; border-radius: 5px; color: #0569b0; background: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; }
.types .type--turnkey { border-color: #6ec4f1; }

@media (max-width: 620px) {
  .formats-intro .title { font-size: clamp(32px, 9vw, 42px); }
  .formats-intro + .types { margin-top: 28px; }
  .types .type,.types .type img { min-height: 0; height: 205px; }
}