@layer dasy.components {

    /* Hero wrapper */
    .wp-block-group.is-style-dasy-hero,
    .wp-block-group.dasy-hero {
        padding: 0 var(--wp--style--root--padding-right) calc(var(--dasy-pad-y) * 5.25) var(--wp--style--root--padding-left);
        position: relative;
    }



    .wp-block-group.is-style-dasy-hero:before,
    .wp-block-group.dasy-hero:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: calc(var(--dasy-pad-y) * 2.5);
        width: 100%;
        height: calc(var(--dasy-pad-y) * .75);
        background: var(--dasy-purple);
    }

    .wp-block-group.is-style-dasy-hero:after,
    .wp-block-group.dasy-hero:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: calc(var(--dasy-pad-y) * 2.5);
        background: linear-gradient(90deg,
                var(--dasy-blue) 0%,
                var(--dasy-blue) 60%,
                var(--dasy-green) 60%,
                var(--dasy-green) 90%,
                var(--dasy-yellow) 90%,
                var(--dasy-yellow) 100%);
    }

    .dasy-hero__content {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: end;
        gap: calc(var(--dasy-pad-x) * 2);
    }

    /* Right-side artwork (image or illustration) */
    .dasy-hero__art {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 0 !important;
    }

    .dasy-hero__art figure {
        margin: 0 !important;

    }

    .dasy-hero__kicker,
    .dasy-hero__kicker>strong {
        font-weight: 500;
        margin-block-start: calc(var(--dasy-pad-y) / 2);
    }

    .dasy-hero__art img {
        width: 100%;
        height: auto;
        max-height: 200px;
        display: block;
    }

    /* Stack on small screens */
    @media (max-width: 800px) {

        .dasy-hero__content {
            grid-template-columns: 1fr !important;
            align-items: start;
        }

        .dasy-hero__art {
            display: none !important;
        }

    }
}