.palette {
    &__section {
        margin: auto auto 40px;
        position: relative;
        z-index: 1;
    }

    &__section-message {
        color: var(--g-color-text-brand);
        margin-bottom: 10px;
        margin-top: -10px;
    }

    &__section-content {
        margin-left: -20px;
        padding-left: 20px;
        padding-bottom: 35px;
        position: relative;
        display: inline-flex;
    }

    &__section-contrast-layer {
        z-index: -5;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 135px;
    }

    &__color {
        &-block {
            &:not(:last-child) {
                margin-right: 20px;
            }
            width: 118px;
            height: 158px;
        }

        &-description {
            margin-top: 8px;
            height: 40px;
            color: var(--g-color-text-primary);
            font-size: 13px;
        }
        &-caption {
            opacity: 0.5;
        }

        &-value {
            width: 118px;
            height: 118px;
            display: flex;
            align-items: center;
            justify-content: center;

            &_border_yes {
                border: 1px solid var(--g-color-line-generic);
            }

            &_skip_yes {
                color: var(--g-color-text-info);
            }
        }
    }
}

.g-root_theme_light .palette__section-contrast-layer {
    background: #000;
    opacity: 0.02;
}

.g-root_theme_dark .palette__section-contrast-layer {
    background: #323138;
}