.product-gallery {
    align-content: center;
    gap: 16px;
}

.product-gallery-stage {
    position: relative;
    display: grid;
    width: 100%;
    place-items: center;
}

.product-gallery-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(228, 239, 232, .9);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 255, 255, .88);
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 160ms ease, border-color 160ms ease;
}

.product-gallery-arrow:hover,
.product-gallery-arrow:focus-visible {
    border-color: var(--olive);
    background: #fff;
}

.product-gallery-arrow.previous { left: 12px; }
.product-gallery-arrow.next { right: 12px; }

.product-gallery-stage img {
    transition: opacity 160ms ease;
}

.product-gallery-stage img.is-changing {
    opacity: .25;
}

.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 76px));
    justify-content: center;
    gap: 9px;
}

.product-gallery-thumbs button {
    padding: 4px;
    border: 1px solid rgba(228, 239, 232, .9);
    background: #fff;
    cursor: pointer;
    opacity: .68;
    transition: border-color 160ms ease, opacity 160ms ease;
}

.product-gallery-thumbs button:hover,
.product-gallery-thumbs button.active {
    border-color: var(--olive);
    opacity: 1;
}

.product-gallery-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}