.block--page-hero {
    position: relative;
    background-color: var(--wp--preset--color--oxford-navy);
    color: var(--wp--preset--color--ash-light);
    padding: 64px 0;

    --mask-size: clamp(20px, 10px + 8.5vw, 100px);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='155' viewBox='0 0 156 155' fill='none'%3E%3Cpath d='M156 155L0 0.5V155H156Z' fill='%23EBF0EF'/%3E%3C/svg%3E") center / contain no-repeat, linear-gradient(#333 0 0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='155' viewBox='0 0 156 155' fill='none'%3E%3Cpath d='M156 155L0 0.5V155H156Z' fill='%23EBF0EF'/%3E%3C/svg%3E") center / contain no-repeat, linear-gradient(#333 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    mask-size: var(--mask-size);
    -webkit-mask-size: var(--mask-size);
    mask-position: calc(0%) calc(100% + 1.5px);
    -webkit-mask-position: calc(0%) calc(100% + 1.5px);

    background-image: url("data:image/svg+xml, %3Csvg width='502' height='279' viewBox='0 0 502 279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-379 -388L286.618 277.125L500.441 277.125L500.497 79.6551L35.9805 -388L-379 -388Z' stroke='%23879BA0' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='305' height='290' viewBox='0 0 305 290' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M773.34 583.753L190.204 2.76959H2.87872L2.82996 175.259L409.784 583.753H773.34Z' stroke='%2359B2F7' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat, no-repeat;
    background-position: calc(100% - 440px) 0%, 100% 100%;
    background-size: clamp(250px, 200px + 10vw, 500px), clamp(150px, 100px + 10vw, 300px);
    background-size: 500px, 300px;
}

@media screen and (max-width: 640px) {
    .block--page-hero{
        background-image: url("data:image/svg+xml, %3Csvg width='502' height='279' viewBox='0 0 502 279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-379 -388L286.618 277.125L500.441 277.125L500.497 79.6551L35.9805 -388L-379 -388Z' stroke='%23879BA0' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='305' height='290' viewBox='0 0 305 290' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M773.34 583.753L190.204 2.76959H2.87872L2.82996 175.259L409.784 583.753H773.34Z' style='opacity:0.25;' stroke='%2359B2F7' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat, no-repeat;
        background-position: calc(100% - 20px) 0%, 100% 100%;
        background-size: clamp(250px, 200px + 10vw, 500px), clamp(150px, 100px + 10vw, 300px);
        background-size: 200px, 175px;
    }
}

.block--page-hero h1 {
    color: var(--wp--preset--color--ash-light);
    max-width: 680px;
    margin-bottom: 20px;
}

.block--page-hero p {
    color: var(--wp--preset--color--ash-light);
    opacity: 0.8;
    max-width: 580px;
}

.block--page-hero--main {
    position: relative;
    z-index: 1;
    min-height: 320px;
}

.block--page-hero--background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    min-height: 300px;
}

.block--page-hero--background img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.35;
}