/* Conteneur de la grille */
.texture-grid {
    --gap-grid: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-grid);
    justify-content: center; /* Centrer les items */
}

/* Éléments individuels */
.texture-item {
    flex: 1 1 calc(33.333% - var(--gap-grid)); /* Trois éléments par ligne */
    width: calc(33.33% - var(--gap-grid));
    max-width: 80px;
    box-sizing: border-box;
    text-align: center;
}

/* Responsivité pour différentes tailles d'écran */
@media screen and (max-width: 1200px) {
    .texture-item {
        flex: 1 1 calc(33.333% - var(--gap-grid)); /* Trois éléments par ligne */
        width: calc(33.333% - var(--gap-grid));
        
    }
}

@media (max-width: 767px) {
    .texture-item {
        flex: 1 1 calc(50% - var(--gap-grid)); /* Deux éléments par ligne */
        width: calc(50% - var(--gap-grid));
    }

    .texture-3d-canvas {
        min-width: 50px;
        min-height: 50px;
    }
}


/* Conteneur du canevas 3D */
.texture-3d-canvas {
    min-width: 70px;
    min-height: 70px;
    position: relative;
    margin: 0 auto; /* Centrer le conteneur du canvas */
}

.texture-3d-canvas canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Style du titre */
.texture-title {
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 0.925rem;
    font-family: 'Lora';
}