.Color-line {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 20fr 20fr 20fr 20fr 20fr;
    grid-template-rows: 80px;

    list-style-type: none;
}

.Color-block {
    border-radius: 3px;
    color: $color_white;
    cursor: pointer;
    font-weight: 500;
    overflow: hidden;
    padding-top: 20px;
    text-align: center;

    &-dark-text {
        color: $color_dark_text;
    }

    &-name-hex {
        opacity: 1;
    }

    &-copy-hex {
        opacity: 0;
    }

    &-name-hex,
    &-copy-hex {
        position: relative;
        top: 0;
        transition: all .3s ease;
    }

    &:hover {
        .Color-block-name-hex {
            opacity: 0;
            top: -20px;
        }

        .Color-block-copy-hex {
            opacity: 1;
            top: -30px;
        }
    }
}