.shell {
    width: min(100% - 108px, 1332px);
    margin-inline: auto;
}

.hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    border-block: 2px solid var(--color-dark-blue);
}

.particle-hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 10px;
    padding-bottom: 18px;
    touch-action: pan-y;
}

.particle-hero svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    fill: var(--color-dark-blue);
    pointer-events: none;
}

.particle-hero #hero-motion-label {
    width: max-content;
    max-width: 92%;
    margin: 0;
    justify-self: center;
    font-size: var(--hero-label-size, 16px);
    line-height: .95;
    letter-spacing: -.045em;
    pointer-events: none;
}

.particle-hero:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 4px;
}

@media handheld, only screen and (max-width: 1050px) {
    .shell {
        width: min(100% - 48px, 900px);
    }

    .hero {
        height: 390px;
    }
}

@media handheld, only screen and (max-width: 700px) {
    .shell {
        width: calc(100% - 32px);
    }

    .hero {
        height: 280px;
    }

    .particle-hero {
        row-gap: 12px;
        padding-bottom: 14px;
    }

    .particle-hero #hero-motion-label {
        width: min(92%, 420px);
        font-size: min(var(--hero-label-size, 16px), 24px);
        line-height: 1;
    }
}