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


#gridarea {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    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;
}

.guide__cards {
    display: flex;
    overflow-x: scroll;
    gap: 20px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    padding-top:20px;
    padding-bottom:20px;
}

.guide__cards-wrapper {
  display: flex;
  gap: 16px;
  margin: 0 auto; 
  min-width: fit-content;
}

.guide-card__img a:link img, .guide-card__img a:visited img {
    transition: all 0.3s ease;
    transform: scale(0.9);
}

.guide-card__img a:hover img {
    transition: all 0.3s ease;
    transform: scale(1.0);
}

.guide-card__img img.selected {
    transition: all 0.3s ease;
    transform: scale(1.0) !important;
    box-shadow: 0 .5rem 1.2rem rgb(255 230 39 / 26%);
    border: 1px solid #ffe627;
}


.guide-card__img, .guide-card__img img {
    width: 180px;
    min-width: 180px;
    object-fit: cover;
    height: auto;
}

.catalog-caption {
    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: 160px;
        min-height: 160px;
        width: 160px;
        height: 160px;
        border-radius: 8px;
    }
    
}