.color-cards__border {
    position: relative;
    padding-left: 32px;
}

.color-cards__headlines h2 {
    margin-bottom: 16px;
}

.color-cards__image {
    width: 110px;
}

.color-cards__image img {
    width: 100%;
    height: auto;
}

.color-cards__top,
.color-cards__middle,
.color-cards__bottom {
    margin-top: 64px;
}

.color-cards__right h3 {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--charcoal-10);
}

.color-cards__right h4 {
    color: var(--charcoal);
}

.colors {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.color {
    text-align: center;
    width: 87px;
}

.color__box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    background: var(--white);
}

.color__title {
    color: var(--black);
    font-size: 12px;
    padding-top: 4px;
}

.colors {
    margin-bottom: 32px;
}

.color__box--white {
    background: #fff;
}

.color__box--sand {
    background: #D8C39A;
}

.color__box--clay {
    background: #B8A894;
}

.color__box--desert-sand {
    background: #C9AB82;
}

.color__box--earthbrown {
    background: #5B4632;
}

.color__box--sandtone {
    background: #C6B190;
}

.color__box--wicker {
    background: #DFBF8E;
}

.color__box--desert-cameo {
    background: #E2D3C0;
}

.color__box--desert-silver-grey {
    background: #C0C5C9;
}

.color__box--victorian-grey {
    background: #9BA0A4;
}

.color__box--harbor-grey {
    background: #7E868C;
}

.color__box--hunter-green {
    background: #355E3B;
}

.color__box--architectural-bronze {
    background: #3B3A30;
}

.color__box--custom {
    /* background-image: radial-gradient(circle closest-side, white, black 90%), conic-gradient(red, #ff8000, yellow, #80ff00, lime, #00ff80, aqua, #0080ff, blue, #8000ff, fuchsia, #ff0080, red); */
    background-image: conic-gradient(#d6d0d0 0deg 45deg, #c4b7a0 45deg 90deg, #5a534b 90deg 135deg, #d2b095 135deg 180deg, #000000 180deg 225deg, #4a3728 225deg 270deg, #8b6f4e 270deg 315deg, #9d917b 315deg 360deg);background-color: transparent;
    background-blend-mode: screen;
    border-radius: 50%;
}

.grids {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.grid {
    width: 139px;
    text-align: center;
    text-decoration: none;
    font-weight: normal;
}

.grid__img img {
    margin: 0 auto;
}

.grid__title {
    padding: 16px 8px 0;
    font-size: 18px;
    line-height: 1em;
    color: var(--black);
}

@media (min-width: 768px) {
    .color-cards__left {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .color-cards__headlines {
        width: 426px;
    }

    .color-cards__headlines h2 {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .color-cards__border {
        padding-left: 0;
    }
    
    .color-cards__top {
        margin-top: 0;
    }

    .color-cards__left {
        display: block;
        padding-left: 32px;
    }

    .color-cards__headlines {
        width: 100%;
        max-width: 552px;
    }

    .color-cards__headlines h2 {
        margin-bottom: 16;
    }

    .color-cards__image {
        width: 270px;
    }

}