header{
    width: 100%;
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url("../images/avif/island.avif");
    background-size: cover;
    background-position: 0% 40%;
    backdrop-filter: brightness(0.5);
    z-index: 2;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    position: relative;
    padding: 0 var(--page-gutter);
    clip-path: polygon(100% 0%, 0% 0% , 0% 99.36%, 1% 99.36%, 2% 99.34%, 3% 99.32%, 4% 99.29%, 5% 99.25%, 6% 99.20%, 7% 99.14%, 8% 99.07%, 9% 99.00%, 10% 98.91%, 11% 98.82%, 12% 98.72%, 13% 98.61%, 14% 98.50%, 15% 98.38%, 16% 98.25%, 17% 98.11%, 18% 97.97%, 19% 97.82%, 20% 97.67%, 21% 97.51%, 22% 97.35%, 23% 97.18%, 24% 97.01%, 25% 96.83%, 26% 96.66%, 27% 96.48%, 28% 96.29%, 29% 96.11%, 30% 95.92%, 31% 95.74%, 32% 95.55%, 33% 95.36%, 34% 95.18%, 35% 94.99%, 36% 94.80%, 37% 94.62%, 38% 94.44%, 39% 94.26%, 40% 94.09%, 41% 93.92%, 42% 93.75%, 43% 93.59%, 44% 93.43%, 45% 93.27%, 46% 93.13%, 47% 92.98%, 48% 92.85%, 49% 92.72%, 50% 92.60%, 51% 92.48%, 52% 92.37%, 53% 92.27%, 54% 92.18%, 55% 92.09%, 56% 92.02%, 57% 91.95%, 58% 91.89%, 59% 91.84%, 60% 91.80%, 61% 91.76%, 62% 91.74%, 63% 91.73%, 64% 91.72%, 65% 91.72%, 66% 91.74%, 67% 91.76%, 68% 91.79%, 69% 91.83%, 70% 91.88%, 71% 91.94%, 72% 92.00%, 73% 92.08%, 74% 92.16%, 75% 92.25%, 76% 92.35%, 77% 92.46%, 78% 92.57%, 79% 92.70%, 80% 92.82%, 81% 92.96%, 82% 93.10%, 83% 93.25%, 84% 93.40%, 85% 93.56%, 86% 93.72%, 87% 93.89%, 88% 94.06%, 89% 94.23%, 90% 94.41%, 91% 94.59%, 92% 94.77%, 93% 94.96%, 94% 95.14%, 95% 95.33%, 96% 95.52%, 97% 95.70%, 98% 95.89%, 99% 96.08%, 100% 96.26%);
}
.content-wrapper{
    display: grid;
    width: 100%;
    max-width: var(--content-width);
    place-items: center;
}
.header-text{
    display: grid;
    text-align: center;
    max-width: 480px;
}

header .content-wrapper h1{
    color: var(--white);
    font-size: 3rem;
    margin-bottom: 10px;
}
header .content-wrapper p,  header b{
    color: white;
    margin: 0;
    font-size: 1.2rem;
}
section{
    display: grid;
    place-items: center;
    width: 100%;
}
section>div{
    max-width:var(--content-width);
    width:100%;
    margin-top: 100px;
    padding: 0 var(--page-gutter);
}
section h2{
    font-size: 2rem;
    margin-top:  60px;
}
section p{
    font-size: 1rem;
}
section a{
    color: var(--pink);
    text-decoration: none;
}
section a:hover{
    color: var(--magenta);
}
section h2:first-of-type{
    margin-top:0;
}
section p:first-of-type{
    font-weight: bold;
}