.name { margin-bottom: 9px; font-stretch: 68%; font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.btn.ext::after { content: '\2197'; }
.btn.ext:hover::after, .btn.ext:focus-visible::after { transform: translate(3px, -3px); }
.card-l { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); opacity: .8; }

.closer { padding-block: clamp(48px, 6vw, 88px); background: var(--purple); color: #fff; }
.closer-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px var(--cg); align-items: center; }
.closer h2, .closer-t { grid-column: span 2; }
.closer h2 { margin-left: -.03em; font-size: clamp(2.6rem, 6vw, 5.4rem); }
.closer-t { display: grid; gap: 24px; justify-items: start; }
.closer-t > p:first-child { max-width: 22em; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-stretch: 88%; font-weight: 500; line-height: 1.3; }
.closer-go { display: flex; align-items: center; gap: 20px; }
.closer-go span { font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .8; }
.closer .btn { --hot: var(--orange); --hot-ink: #000; }
.closer .btn:focus-visible { outline-color: #fff; }

@media (max-width: 999px) {
  .closer-g { grid-template-columns: 1fr 1fr; }
  .closer h2, .closer-t { grid-column: auto; }
}
@media (max-width: 760px) {
  .closer-g { grid-template-columns: 1fr; }
  .closer-go { flex-wrap: wrap; }
  .name { font-size: 1.9rem; }
}