.hero-flight {
    --flight-paper: #e4edce;
    --flight-paper-light: #f2f6df;
    --flight-wing: #5d936c;
    --flight-fold: #315c41;
    --flight-keel: #183b2a;
    --flight-edge: #faffef;
    --flight-glow: #e9efdb;
    --flight-trail-start: #d8c598;
    --flight-trail-end: #94b799;
    position: relative;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    margin-inline: auto;
    line-height: 0;
}

[data-theme='dark'] .hero-flight {
    --flight-paper: #dcebbf;
    --flight-paper-light: #eef6d3;
    --flight-wing: #8bb77e;
    --flight-fold: #446b4c;
    --flight-keel: #294a35;
    --flight-edge: #f5ffdf;
    --flight-glow: #36553b;
    --flight-trail-start: #8b805e;
    --flight-trail-end: #769879;
}

.hero-flight svg { display: block; width: 100%; height: auto; overflow: visible; }
.flight-glow-centre { stop-color: var(--flight-glow); stop-opacity: .85; }
.flight-glow-edge { stop-color: var(--flight-glow); stop-opacity: 0; }
.flight-trail-start { stop-color: var(--flight-trail-start); }
.flight-trail-end { stop-color: var(--flight-trail-end); }
.flight-paper-light { stop-color: var(--flight-paper-light); }
.flight-paper-shade { stop-color: var(--flight-paper); }
.flight-wing-light { stop-color: var(--flight-wing); }
.flight-wing-shade { stop-color: var(--flight-fold); }
.flight-halo { fill: url(#flight-halo); }
.flight-shadow { fill: var(--flight-fold); }
.flight-ribbon { fill: none; stroke: url(#flight-ribbon-colour); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.flight-breeze { fill: none; stroke: url(#flight-ribbon-colour); stroke-width: 3.5; stroke-linecap: round; opacity: .5; }
.flight-paper { fill: url(#flight-paper-colour); }
.flight-wing { fill: url(#flight-wing-colour); }
.flight-keel { fill: var(--flight-keel); }
.flight-crease { fill: none; stroke: var(--flight-edge); stroke-width: 1; stroke-opacity: .65; }
.flight-paper-edge { fill: none; stroke: var(--flight-fold); stroke-width: .65; stroke-opacity: .16; }

@media (max-width: 979px) and (min-width: 720px) {
    .hero-flight { width: calc(100% + 18px); margin-left: -9px; }
}

@media (max-width: 719px) {
    .hero-flight { width: min(100%, 430px); margin-block: -12px -22px; }
}