.public-hero { background-color: var(--sage); }

.public-hero > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.public-hero h1 {
    font-size: clamp(1.75rem, 7vw, var(--front-title-size));
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    text-shadow: 0 2px 12px #211a14cc, 0 1px 2px #211a14;
}
.public-hero .hero-names { margin: .08em 0 .28em; }
.public-hero .hero-name-separator { color: var(--gold); }
.public-hero .supporting-names { margin: -.15em 0 .75em; font-size: clamp(.95rem, 2.2vw, 1.2rem); }
.invitation-hero .supporting-names { font-style: italic; }
.save-date-hero .welcome-line,
.invitation-hero .welcome-line {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    font-size: clamp(1.15rem, 3vw, var(--front-welcome-size));
    text-shadow: 0 2px 12px #211a14cc, 0 1px 2px #211a14;
}
.public-hero .save-date-title {
    margin: 0 0 .35em;
    font: 500 clamp(1.75rem, 7vw, var(--front-title-size))/1.08 var(--front-display-font);
    letter-spacing: .14em;
}
.public-hero .eyebrow {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-shadow: 0 2px 12px #211a14cc, 0 1px 2px #211a14;
}
.public-hero > div > p,
.public-hero > div > h2 {
    color: #fff;
    text-shadow: 0 2px 12px #211a14cc, 0 1px 2px #211a14;
}
.public-hero > div > h2 { font-size: clamp(1.1rem, 3vw, var(--front-date-size)); }
@media (min-width: 601px) {
    .gallery-modal-shell { display: block; padding-inline: 76px; }
    .gallery-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
    .gallery-modal-nav.previous { left: 18px; }
    .gallery-modal-nav.next { right: 18px; }
}
.gallery-modal-nav { line-height: 0; font-size: 0 !important; }
.gallery-modal-nav::before { display: block; font: 400 2rem/1 Arial, sans-serif; }
.gallery-modal-nav.previous::before { content: '‹'; }
.gallery-modal-nav.next::before { content: '›'; }
@media (max-width: 600px) { .gallery-modal-nav::before { font-size: 1.65rem; } }