div:has(>.product-images-div) {
    --w: 100px;
    --m: 0.2rem;
}

.product-images-div {
    background-color: var(--wc-white);
    border-radius: 1rem;
    overflow: hidden;
}

.product-images-div ul li img {
    display: block;
    width: 100%;
    height: calc(100dvh - var(--navbar-height) - var(--w) - (2 * var(--m)) - 12px);
    min-height: 300px;
    aspect-ratio: 1;
    object-fit: contain;
}

.thumbnails {
    display: flex;
    margin: 1rem auto 0;
    padding: 0;
    justify-content: center;
}

.thumbnail {
    width: var(--w);
    aspect-ratio: 1;
    overflow: hidden;
    list-style: none;
    border: 3px solid var(--wc-green-2);
    border-radius: 0.5rem;
    margin: 0 var(--m);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.thumbnail img {
    width: 100%;
    height: auto;
    background-color: var(--wc-white);
}

.thumbnail {
    opacity: 0.3;
}

.thumbnail.is-active {
    border-color: var(--wc-green);
    opacity: 1;
}