.grid-container {
    display: grid;
    gap: 20px;
    margin: auto;
    justify-content: center;
}

.grid-product{
    width:80%;
    display: grid;
    gap: 60px 20px;
    margin: auto;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr); /* desktop: 2 colonne fluide */
}

.group-2{
    grid-template-columns: repeat(2, 1fr); /* desktop: 2 colonne fluide */
    width:50%;
}

.group-3{
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 colonne fluide */
    width:75%;
}

.group-4{
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 colonne fluide */
}

.group-5{
    grid-template-columns: repeat(5, 1fr); /* desktop: 5 colonne fluide */
}

.grid-item {
  text-align: center;
}

.grid-item div:not(.grid-item-video) {
  background: #FFFFFF;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}
  
.grid-item p {
font-size:1.8em;
}

.grid-item-video {
border-radius: 10px;
overflow: hidden;
}

.grid-item-video video {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

@media screen and (max-width: 620px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne */
    grid-auto-flow: column;                /* riempi per colonna */
    gap: 20px;
}
.group-2{width:100%;}
.group-3{grid-template-rows: repeat(3, auto);   /* 3 righe */
width:100%;}
.group-4{grid-template-rows: repeat(4, auto);   /* 4 righe */}
.group-5{grid-template-rows: repeat(5, auto);   /* 5 righe */}
.grid-product{width:100%; gap: 20px 10px;}
}