.half-half {
    --hh-inner-width: 1400px;
    --hh-gradient-direction: to right;
    --hh-gradient-1: #f5edea;
    --hh-gradient-2: #dfd5d3;
    --hh-gradient-3: #856259;
    --hh-h2: #5d433c;
    --hh-h3: #856259;
    --hh-h4: #856259;
    --hh-text: #3f312e;
    --hh-link: #fa9403;
    --hh-link-hover: #5d433c;
    --hh-image-radius-tl: 0;
    --hh-image-radius-tr: 0;
    --hh-image-radius-br: 0;
    --hh-image-radius-bl: 0;
    align-items: center;
    display: grid;
    margin-bottom: var(--hh-margin-bottom, 40px);
    margin-top: var(--hh-margin-top, 40px);
    overflow: visible;
    position: relative;
    width: 100%;
}

.half-half *,
.half-half *::before,
.half-half *::after {
    box-sizing: border-box;
}

.half-half__band {
    align-self: center;
    background: linear-gradient(var(--hh-gradient-direction), var(--hh-gradient-1) 0%, var(--hh-gradient-2) 50%, var(--hh-gradient-3) 100%);
    grid-area: 1 / 1;
    min-width: 0;
    position: relative;
    width: 100%;
}

.half-half__inner,
.half-half__media-layer {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--hh-inner-width);
    width: calc(100% - 40px);
}

.half-half__inner {
    display: flex;
}

.half-half__text {
    color: var(--hh-text);
    flex: 0 0 50%;
    line-height: 1.55;
    min-width: 0;
    padding: clamp(34px, 5vw, 74px) clamp(24px, 4vw, 64px);
}

.half-half--image-left .half-half__text {
    margin-left: 50%;
}

.half-half--image-right .half-half__text {
    margin-right: 50%;
}

.half-half--no-image .half-half__text {
    flex-basis: 100%;
    margin: 0;
}

.half-half__text > :first-child {
    margin-top: 0;
}

.half-half__text > :last-child {
    margin-bottom: 0;
}

.half-half__text h2 { color: var(--hh-h2); }
.half-half__text h3 { color: var(--hh-h3); }
.half-half__text h4 { color: var(--hh-h4); }
.half-half__text a { color: var(--hh-link); }
.half-half__text a:hover,
.half-half__text a:focus-visible { color: var(--hh-link-hover); }

.half-half__media-layer {
    align-self: center;
    grid-area: 1 / 1;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.half-half__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--hh-image-radius-tl) var(--hh-image-radius-tr) var(--hh-image-radius-br) var(--hh-image-radius-bl);
    margin: 0;
    overflow: hidden;
    width: 50%;
}

.half-half--image-shadow .half-half__media {
    box-shadow: 0 16px 30px rgb(25 18 16 / 28%);
}

.half-half--image-right .half-half__media {
    margin-left: auto;
}

.half-half__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 760px) {
    .half-half {
        display: flex;
        flex-direction: column;
    }

    .half-half__media-layer {
        margin-left: auto;
        margin-right: auto;
        order: 1;
        width: 100%;
    }

    .half-half__band {
        order: 2;
    }

    .half-half__media {
        margin: 0;
        width: 100%;
    }

    .half-half__inner {
        width: 100%;
    }

    .half-half__text,
    .half-half--image-left .half-half__text,
    .half-half--image-right .half-half__text {
        flex-basis: 100%;
        margin: 0;
        padding: 32px 20px;
    }
}