/**
 * Product Gallery Component CSS
 */

.product-gallery {
    width: 100%;
}

.product-gallery__main {
    margin-bottom: var(--spacing-sm);
}

.product-gallery__main-image {
    width: 100%;
    height: 500px;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-gallery__thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.product-gallery__thumbnail {
    aspect-ratio: 16/9;
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.product-gallery__thumbnail:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 767px) {
    .product-gallery__main-image {
        height: 300px;
    }

    .product-gallery__thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }
}