.bento-wrapper {
    width: 100%;
    aspect-ratio: 3 / 3; 
    position: relative;
   /* overflow: hidden;*/ 
}

.woow-bento {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; 
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.woow-bento > div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.woow-bento .text-experience { 
    grid-area: 1 / 1 / 2 / 2; 
    background-color: #A3E4EA; 
    color: #000;
}
.woow-bento .img-wide { 
    /* Occupa due colonne in orizzontale => rapporto 2:1 nella stessa griglia */
    grid-area: 1 / 2 / 2 / 4; 
}
.woow-bento .img-square { 
    /* Un singolo slot 1x1 => quadrato nel contesto della griglia */
    grid-area: 2 / 1 / 3 / 2; 
}
.woow-bento .text-ecommerce { 
    grid-area: 2 / 2 / 3 / 3; 
    background-color: #F3FFFF; 
    color: #000;
}
.woow-bento .text-project { 
    /* Occupa due colonne in orizzontale nella parte bassa => 2:1 */
    grid-area: 3 / 1 / 4 / 3; 
    background-color: #0255FF; 
    color: #fff;
}
.woow-bento .img-tall { 
    /* Occupa due righe in verticale => 1:2 nella stessa griglia */
    grid-area: 2 / 3 / 4 / 4; 
}

/* Stili testo */
.woow-bento .text-experience,
.woow-bento .text-ecommerce, 
.woow-bento .text-project {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    box-sizing: border-box; 
}

.woow-bento .number {
    font-size: clamp(30px, 15vw, 300px);
    font-weight: 250;
    line-height: 1;
    font-family: "Roboto Mono", sans-serif;
    position: relative;
}

.woow-bento .text {
    font-size: clamp(16px, 2.5vw, 300px); 
    font-weight: 700;
    font-family: "Archivo", sans-serif;
    line-height:30px !important;
    text-transform: uppercase;
}

.woow-bento .number::after {
    content: "+";
    font-size: clamp(30px, 10vw, 250px); 
    font-weight: 100;
    line-height: 1;
    position: absolute;
    margin-top:1%;
}

.bento-video {
    width:100%;
    height:100%;
    object-fit: cover;
}

@media  (min-width: 768px) and (max-width: 900px) {
.woow-bento .number {
    font-size: clamp(30px, 10vw, 300px);
}
	
.bento-text  {
    
    line-height:15px !important;
}
	
}

/* CSS per dispositivi mobili */
@media only screen and (max-width: 768px) {
    .bento-wrapper {
        
        aspect-ratio: auto;
        height: auto;
    }

    .woow-bento {
        position: static;
        display: block;
        width: 100%;
        height: auto;
    }

    .woow-bento > div {
        display: block;
        width: 100%;
        height: 480px;
		
    }
	
	.woow-bento .img-tall {
		height: 600px;
	}

    .woow-bento .text-experience,
    .woow-bento .img-wide,
    .woow-bento .img-square,
    .woow-bento .text-ecommerce,
    .woow-bento .text-project,
    .woow-bento .img-tall {
        grid-area: unset;
		background-size:cover !important;
		background-position:center !important;
    }

    .woow-bento .number {
        font-size: clamp(50px, 40vw, 300px);
        line-height: 1;
    }

    .woow-bento .number::after {
        font-size: clamp(30px, 20vw, 100px);
        line-height: 1;
        margin-top: 10px;
    }

    .woow-bento .text {
        font-size: clamp(14px, 10vw, 80px);
       line-height:30px !important;
    }
}