:root {
    --pvk-width: 100vw;
    --pvk-border: 1px solid gray;
}


#gridarea {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin-bottom: 5rem;
}

.break {
    flex-basis: 100%;
    height: 0;
  }

.colorsquare {
    min-width: calc((var(--pvk-width) / 4));
    min-height: calc((var(--pvk-width) / 4));
    width: calc((var(--pvk-width) / 4));
    height: calc((var(--pvk-width) / 4));
    transition: transform .3s ease;
    cursor: pointer !important;

    display: flex;
    justify-content: center;
    flex-direction: column;

    border-radius: 4px;

}

.previewsquare {
    height: 30vh !important;
    width: auto !important;
    min-width: 100%;
    min-height: 20vh !important;    
}

.colorsquare:hover {
    transform: scale(1.1);
}

.color-item label {
    cursor: pointer !important;
    transform: scale(1.0) !important;
    transition: transform .3s ease !important;
}
.color-item label:hover {
    transform: scale(1.1) !important;
}
.color-item label.selected {
    border: 10px solid #eee !important;
}

.design-paragraph {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #282828;
}

@media screen and (min-width: 768px) {
    .colorsquare {
        min-width: 102px;
        min-height: 102px;
        width: 102px;
        height: 102px;
        border-radius: 8px;
    }
    
}