.at-oneCol {
    position: relative;
    background-color: var(--primaryColor100);
}

.at-oneCol::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -3vw;
    display: block;
    width: clamp(90px, 40vw, 300px);
    aspect-ratio: 1;
    background: transparent url(../../images/lines-white.png) no-repeat 0 0;
    background-size: contain;
}

.at-oneCol__title {
    color: var(--primaryColor500);
}

.at-oneCol__inner {
    display: grid;
    gap: var(--marginBottom88);
}

.at-oneCol__item {
    max-width: 42rem;
    margin-inline: auto;
}

.at-oneCol__itemTitle {
    font-weight: 700;
}

.at-oneCol.--bg-blue {
    margin-block: var(--marginBottom88);
    padding-block: var(--marginBottom88);
    color: var(--baseLight100);
}

.at-oneCol.--bg-blue {
    background-color: var(--primaryColor500);
}

.at-oneCol.--bg-blue :is(.at-oneCol__title, .at-oneCol__itemTitle) {
    color: var(--secondaryColor500);
}

.--bg-none .at-oneCol__image {
    mix-blend-mode: multiply;
}

@media (min-width: 768px) {
    article.at-oneCol.--noLines {
        margin-bottom: var(--marginBottom88);
    }

    .at-oneCol__inner {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .at-oneCol__imageWrapper {
        margin-top: 1.25rem;
    }
}

@media (min-width: 1024px) {
    article.at-oneCol {
        margin-bottom: 0;
    }

    article.at-oneCol.--noLines {
        margin-bottom: var(--marginBottom88);
    }

    .at-oneCol:not(.--noLines)::after {
        content: '';
        display: block;
        width: 150px;
        height: var(--marginBottom152);
        margin-inline: auto;
        background: transparent url(../../images/lines-4.svg) no-repeat center top;
    }

    .at-oneCol.--bg-blue::after,
    .at-oneCol.--bg-red::after {
        content: none;
    }
}