.content-boxes {
    padding: 32px 0;
}

.content-boxes .boxes-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
}

.content-boxes .box-single {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: calc(50% - 32px);
    padding: 32px;
    font-size: calc(3rem * var(--font-scale));
    gap: 64px;
    display: flex;
    flex-direction: column;
    aspect-ratio: 530 / 409;
}

.content-boxes.columns-1 .box-single {
    width: 100%;
}

.content-boxes.columns-2 .box-single {
    width: calc(50% - 32px);
}

.content-boxes.columns-3 .box-single {
    width: calc(33.33333333% - 43px);
}

.content-boxes.columns-4 .box-single {
    width: calc(25% - 48px);
}

.content-boxes .box-single p {
    opacity: 0;
    transition: opacity .3s ease;
}

.content-boxes .box-single::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    transition: opacity .3s ease;
}

.content-boxes .box-single:hover::before {
    opacity: 0.75;
}

.content-boxes .box-single:hover p {
    opacity: 1;
}

.content-boxes .box-single:hover h3::before {
    opacity: 0;
}

.content-boxes .box-single:hover h3::after {
    opacity: 1;
}

.content-boxes .box-single>* {
    z-index: 4;
    position: relative;
    color: #fff;
}

.content-boxes .box-single h3 {
    font-size: calc(3.2rem * var(--font-scale));
    font-weight: 700;
    margin-top: auto;
    position: relative;
}

.content-boxes .box-single h3::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background-color: #fff;
    transition: opacity .3s ease;
}

.content-boxes .box-single h3::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-32px);
    width: 25%;
    height: 4px;
    background-color: #fff;
    transition: opacity .3s ease;
    opacity: 0;
}

@media (min-width:1440px) {

    .content-boxes.columns-3 .box-single,
    .content-boxes.columns-4 .box-single {
        font-size: calc(2rem * var(--font-scale));
    }

    .content-boxes.columns-3 .box-single h3,
    .content-boxes.columns-4 .box-single h3 {
        font-size: calc(2.4rem * var(--font-scale));
    }
}

@media (max-width:1440px) {
    .content-boxes .box-single {
        font-size: calc(2rem * var(--font-scale));
    }

    .content-boxes .box-single h3 {
        font-size: calc(2rem * var(--font-scale));
    }
}

@media (max-width:1199px) {

    .content-boxes.columns-2 .box-single,
    .content-boxes.columns-3 .box-single,
    .content-boxes.columns-4 .box-single {
        width: calc(50% - 32px);
    }
}

@media (max-width:991px) {
    .content-boxes .boxes-wrapper {
        gap: 16px;
    }

    .content-boxes.columns-2 .box-single,
    .content-boxes.columns-3 .box-single,
    .content-boxes.columns-4 .box-single {
        width: calc(50% - 8px);
    }

    .content-boxes .box-single {
        width: calc(50% - 8px);
        padding: 24px;
        font-size: calc(1.2rem * var(--font-scale));
        gap: 32px;
    }

    .content-boxes .box-single h3 {
        font-size: calc(1.2rem * var(--font-scale));
    }

    .content-boxes .box-single h3::before {
        left: -12px;
        width: 2px;
    }

    .content-boxes .box-single h3::after {
        height: 2px;
        transform: translateY(-16px);
    }
}

@media (max-width:520px) {

    .content-boxes.columns-2 .box-single,
    .content-boxes.columns-3 .box-single,
    .content-boxes.columns-4 .box-single,
    .content-boxes .box-single {
        width: 100%;
    }
}

/* contrast */

.contrast-yellow-black .content-boxes .box-single h3,
.contrast-yellow-black .content-boxes .box-single p {
    color: var(--wcag-yellow) !important;
}

.contrast-black-yellow .content-boxes .box-single h3::before,
.contrast-black-yellow .content-boxes .box-single h3::after,
.contrast-yellow-black .content-boxes .box-single h3::before,
.contrast-yellow-black .content-boxes .box-single h3::after {
    background-color: var(--wcag-yellow);
}

/* contrast */