/* Homepage only: screenshots must not grow with an ultrawide browser window. */
.public-home {
    --public-content-width: 1480px;
    --public-gutter: 32px;
}

.public-home .public-hero,
.public-home .public-features,
.public-home .public-pricing,
.public-home .public-registration {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--public-content-width);
    margin-inline: auto;
    padding-inline: var(--public-gutter);
}

.public-home .public-header,
.public-home .public-footer {
    padding-inline: max(var(--public-gutter), calc((100% - var(--public-content-width)) / 2 + var(--public-gutter)));
}

.public-home .public-hero {
    min-height: 0;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 48px;
    padding-block: 64px;
}

.public-home .public-hero-copy,
.public-home .public-product-frame {
    min-width: 0;
}

.public-home .public-hero-copy h1 {
    max-width: 11em;
    font-size: clamp(44px, 4.25vw, 64px);
}

.public-home .public-feature-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 48px;
}

.public-home :is(#funktionen, #preise, #teilnehmer-registrierung) {
    scroll-margin-top: 100px;
}

@media (min-width: 1051px) and (max-height: 700px) {
    .public-home .public-hero {
        padding-block: 32px;
    }

    .public-home .public-hero-copy h1 {
        font-size: clamp(44px, 4.25vw, 56px);
    }

    .public-home .public-hero-copy p {
        margin-bottom: 24px;
        font-size: 16px;
    }
}

@media (max-width: 1050px) {
    .public-home .public-hero,
    .public-home .public-feature-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .public-home .public-hero-copy {
        max-width: 700px;
    }

    .public-home .public-hero-copy h1 {
        max-width: 13em;
        font-size: 52px;
    }
}

@media (max-width: 700px) {
    .public-home {
        --public-gutter: 18px;
    }

    .public-home .public-hero {
        padding-block: 40px;
        gap: 32px;
    }

    .public-home .public-hero-copy h1 {
        font-size: clamp(34px, 9vw, 39px);
    }
}