/* Global Section Accents */
.has-accent {position: relative;}
.has-accent::after {content: ""; position: absolute; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: contain;}
.accent-dragonfly::after {width: clamp(120px, 22vw, 325px); aspect-ratio: 665 / 761; background-image: url(../accents/accent-dragonfly.svg);}
.accent-butterfly::after {width: clamp(200px, 46vw, 700px); aspect-ratio: 1 / 1; background-image: url(../accents/accent-butterfly.svg);}
.accent-dragonfly-leaf::after {width: clamp(150px, 25vw, 475px); aspect-ratio: 636 / 401; background-image: url(../accents/accent-dragonfly-leaf.svg);}
.accent-pos-top-left::after {top: 0; left: 0; translate: -45% -30%;}
.accent-pos-top-right::after {top: 0; right: 0; translate: 28% -24%;}
.accent-pos-mid-left::after {top: 50%; left: 0; translate: -28% -50%;}
.accent-pos-mid-right::after {top: 50%; right: 0; translate: 28% -50%;}
.accent-pos-bottom-left::after {bottom: 0; left: 0; translate: -16% 12%;}
.accent-pos-bottom-right::after {bottom: 0; right: 0; translate: 28% 24%;}

/* Section wave edges */
.has-waves {position: relative; isolation: isolate; background: transparent !important; --wave-h: clamp(4rem, 6vw, 9rem); --wave-bg: var(--wellington-green);}
.has-waves::before {content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wave-h) - 1px); bottom: calc(var(--wave-h) - 1px); background: var(--wave-bg); z-index: -1;}
.section-wave {position: absolute; left: 0; width: 100%; height: var(--wave-h); color: var(--wave-bg); z-index: -1; line-height: 0;}
.section-wave--top {top: 0;}
.section-wave--bottom {bottom: 0;}
.section-wave svg {display: block; width: 100%; height: 100%;}

/* Responsive */
@media (max-width: 700px) {
    .accent-dragonfly::after, .accent-butterfly::after, .accent-dragonfly-leaf::after {width: clamp(200px, 24vw, 250px);}
}

@media (max-width:500px) {
    .accent-dragonfly-leaf::after {width: 300px;}
    .accent-butterfly::after {width: 400px; top: unset; bottom: -23%;}
}