.hero-section {
    min-height: calc(100vh - (2*var(--wp--preset--spacing--40)) - 48px);
}

@media screen and (min-width: 600px) {
    .wp-block-navigation__submenu-container {
        border: 2px solid var(--wp--preset--color--accent-2) !important;
    }
}

@media screen and (max-width: 599px) {
    .wp-block-navigation__submenu-container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.75rem !important;
    }

    .wp-block-navigation__submenu-container
    .wp-block-pages-list__item {
        border-right: 1px solid var(--wp--preset--color--accent-2) !important;
    }

    .wp-block-navigation__submenu-container
    .wp-block-pages-list__item:last-child {
        border-bottom: 1px solid var(--wp--preset--color--accent-2) !important;
    }
}


.custom-hero-bg .wp-block-cover__image-background,
.custom-hero-bg .wp-block-cover__background,
.custom-footer-bg .wp-block-cover__image-background,
.custom-footer-bg .wp-block-cover__background {
    /* 1. Limit to the right half */
    width: 50% !important;
    height: 100% !important;
    left: auto !important;
    right: -30% !important;

    mix-blend-mode: screen !important;    
}

.custom-hero-bg .wp-block-cover__image-background,
.custom-hero-bg .wp-block-cover__background {
    transform: rotate(180deg);

    /* 3. The Gradient Mask (Fades from right to left) */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}

.custom-footer-bg .wp-block-cover__image-background,
.custom-footer-bg .wp-block-cover__background {
    transform: rotate(-90deg);

    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}