$color-border-radius: 5px !default;

.cl-palette {
    @extend .cl;

    $media-screen-padding: 5px;

    padding: 0;
    list-style: none;
    text-align: center;

    @media (min-width: $screen-md-min) {
        margin-left: -$media-screen-padding;
        margin-right: -$media-screen-padding;
        li {
            display: table-cell;
            vertical-align: top;
            width: 1%;
            padding: 0 $media-screen-padding;
        }
    }

    li {
        color: #fff;
    }

    h3 {
        color: #333;
        font-size: 14px;
        font-weight: 600;
        margin: 20px 0 10px 0;
    }

    .color {
        height: 120px;
        padding-top: 1.5em;

        &:first-of-type {
            border-top-left-radius: $color-border-radius;
            border-top-right-radius: $color-border-radius;
        }

        &:last-of-type {
            border-bottom-right-radius: $color-border-radius;
            border-bottom-left-radius: $color-border-radius;
        }
    }
}