#services {
    position: relative;
    --service-art-height: calc(var(--block-art-width) / 45 * 58);
    min-height: var(--service-art-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--content-block-vertical-padding);
}

:where(:not(#hero)) .art {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: var(--block-art-width);
}

#services .art {
    left: var(--content-block-side-padding);
    background-image: url("/static/img/services-art.svg");
    height: var(--service-art-height);
}


#services .description {
    padding:
            var(--content-block-side-padding)
            var(--content-block-side-padding)
            var(--content-block-side-padding)
            calc(var(--content-block-side-padding) * 2 + var(--block-art-width));
    background-color: var(--color-dark-bg);

    color: white;
    box-sizing: border-box;
    border-radius: var(--content-block-border-radius);

    display: flex;
    flex-direction: column;
    gap: var(--content-block-vertical-padding);

}



#services .description ul {
    display: flex;
    flex-direction: column;
    gap: .7em;
    font-size: var(--paragraph-font-size);
}

#services .description h3 {
    font-size: 1.45em;
    letter-spacing: .03ch;
}


#services .description :is(ul, li, h3) {
    padding-block: 0;
    margin-block: 0;
    padding-inline: 0;
    margin-inline: 2ch 0;
}


#services .note {
    padding: 0 var(--content-block-side-padding) 0 calc(var(--content-block-side-padding) * 3 + var(--block-art-width));
}

#banner {
    --banner-art-height: calc(var(--block-art-width) / 25 * 24);
    position: relative;
    min-height: calc(
            var(--banner-art-height)
            /*+ var(--content-block-side-padding) * 2*/
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*border: 1px solid var(--color-control-area-border);*/
}

#banner .art {
    right: var(--content-block-side-padding);
    background-image: url("/static/img/banner-art.svg");
    height: var(--banner-art-height);
}

#banner .description {
    padding:
            var(--content-block-side-padding)
            calc(var(--content-block-side-padding) * 2 + var(--block-art-width))
            var(--content-block-side-padding)
            var(--content-block-side-padding);

    background-color: var(--color-light-bg);
    border-radius: var(--content-block-border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--content-block-vertical-padding);
}

#banner .description :is(h3, p) {
    margin: 0;
    padding: 0;
}

#banner .description h3 {
    font-weight: 900;
    font-size: 2.25rem;
    color: var(--color-dark-bg);
}

#banner .description p {
    font-size: 1.1em;
}