.announcement-panel {
    margin-inline: var(--gutter);
    border: 1px solid var(--line);
    background: var(--surface);
}

.announcement-panel .shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    padding-block: 2.5rem;
}

.announcement-panel span {
    color: var(--accent);
    font: 600 .7rem Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.announcement-panel h2 {
    font-size: clamp(2rem, 4vw, 4.5rem);
}

.hero-component figcaption {
    padding-top: .65rem;
    color: var(--muted);
    font: 600 .58rem Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .announcement-panel .shell { grid-template-columns: 1fr; }
}