@layer marielco-home-hero {
    .marielco-home-hero {
        position: relative;
        isolation: isolate;
        block-size: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
        min-block-size: 480px;
        overflow: hidden;
        background: #373936;
        color: var(--marielco-white);
        font-family: var(--marielco-font-family);
    }
    .marielco-home-hero__image {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: var(--marielco-hero-desktop-position, 50% 50%);
    }
    .marielco-home-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgb(0 0 0 / .16), transparent 21%);
    }
    .marielco-home-hero__copy {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--marielco-header-height) 20px;
    }
    .marielco-home-hero h1 {
        margin: 0 0 23px;
        font-family: var(--marielco-font-family);
        font-size: clamp(37px, 3.8vw, 58px);
        font-weight: var(--marielco-weight-body);
        font-style: normal;
        line-height: 1.1;
        letter-spacing: -.04em;
        text-align: center;
    }
    .marielco-home-hero__discover {
        padding-block: 5px;
        font-size: var(--marielco-text-small);
        font-weight: var(--marielco-weight-body);
        line-height: var(--marielco-line-body);
        --marielco-underline-opacity: 0;
    }
    .marielco-home-hero__discover:where(:hover, :focus-visible) { --marielco-underline-opacity: 1; }
    @media (max-width: 63.999rem) {
        .marielco-home-hero__image { object-position: var(--marielco-hero-mobile-position, 79% 50%); }
        .marielco-home-hero h1 { font-size: clamp(37px, 10.8vw, 42px); margin-bottom: 21px; }
    }
}