.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 0fr);
    grid-gap: 8px 30px;
    justify-items: center;
    align-items: center;
    /*max-width: 700px;*/
    margin: auto;
    margin-top: 160px;
}
.grid-container > div:first-child {grid-column: span 1;}
.grid-item1 {
    position: relative;
    text-align: center;
   /* border: black 1px solid; */
    /*min-width: 100px; */
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 320px;
/*	filter: brightness(0.4); */
    
   /* background: rgba(255, 248, 1, 1.0); */
   /* background: radial-gradient(at center, rgba(255, 248, 1, 1.0), rgba(255, 231, 1, 0.0)); */
}

.grid-item1 div.primod  {background: white; display: flex; flex-wrap: wrap; border-radius: 12px;}



.grid-item1 div.primod h4 {background: #25a7e5; width: 100%; padding: 5px; color: #fff; border-radius: 10px 10px 0px 0px;}
.grid-item1 div.primod h4 p {padding: 15px 0;}
.grid-item1 div.primod h4 div {background: #033a5f; color: white; padding: 16px 0; border-radius: 0px 0px 10px 10px;}
.grid-item1.attiva {
cursor: pointer; filter: brightness(1.2) saturate(1.2) sepia(0.3) hue-rotate(-15deg) drop-shadow(0 0 12px rgba(255, 234, 0, 0.7));
    
}

.grid-item1.old {cursor: pointer; filter: brightness(1.0);}
.grid-item1.old:hover {transform: scale(1.05);}
/*
.grid-item1.attiva:hover {
animation-name: rotateStop;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

 */


.grid-item1 a  {display: block;}
/* .grid-item1.attiva {background: rgb(255,239,0); background: -moz-radial-gradient(circle, rgba(255,231,0,1) 0%, rgba(255,231,0,0.6) 60%, rgba(255,231,0,0) 72%); background: -webkit-radial-gradient(circle, rgba(255,231,0,1) 0%, rgba(255,231,0,0.6) 60%, rgba(255,231,0,0) 72%); background: radial-gradient(circle, rgba(255,231,0,1) 0%, rgba(255,231,0,0.6) 60%, rgba(255,231,0,0) 72%);} */

.grid-item1 img {width: 85%; z-index: 1; position: relative; overflow: hidden;min-width: 150px; margin:auto; filter: brightness(1.0);}
.grid-item1.old img {filter: brightness(1.0);}
/*.grid-item1 div {width: 100%; z-index: 2; position: absolute; bottom: 6%; color: #002742; margin: auto; font-size: 2vw; font-size: 16px; font-weight: bold;} */
.grid-item1 div {width: 100%; z-index: 2; bottom: 6%; color: #fff; margin: auto; font-size: 2vw; font-size: 18px; font-weight: bold; }
.grid-item1.attiva:hover div,  .grid-item1.old:hover div {color:#ffdb76;}

.grid-item1 div {filter: brightness(0.6);}
.grid-item1 img {filter: brightness(0.6);}
.grid-item1.old div {filter: brightness(1.0);}
.grid-item1.old img {filter: brightness(1.0);}





#MainSite {background-image: url('https://cdn-ltm.betflag.it/info/media/20759/sfondo-mondiali-2026_desktop.jpg');  background-repeat: no-repeat;  background-position: top center; min-height:1080px;}
#MobileMainContent  {background-color: #004d85; background-image: url('https://cdn-ltm.betflag.it/info/media/20753/sfondo-mondiali-2026_mobile.jpg');  background-repeat: no-repeat;  background-position: top center; min-height:550px; margin-left: -15px;
        margin-right: -15px;}
@keyframes rotateFeather {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(4deg);
    }
    50% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotateStop {
    to {
        transform: rotate(0deg);
    }
 }

/* 0 to 299 */
.grid-item1 div {font-size: 16px;}
/* 300 to X */

@media (max-height: 600px) { 
    .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:8px 25px;}
    .grid-container > div:first-child {grid-column: span 1;}
/*  .grid-container > div:first-child img {width: 80%;} */
    .grid-item1 div {font-size: 12px; bottom: 7%;}
}

@media (max-width: 720px) { /* or 301 if you want really the same as previously.  */
    .grid-item1 div {font-size: 4vw;}
    .grid-container {margin: 15px; margin-top: 150px;}
    #header_content {margin-left: -15px; margin-right: 0;}
	.grid-container div.grid-item1:last-child {margin-bottom: 30px;}
	
}
@media (max-width: 567px) { /* or 301 if you want really the same as previously.  */
    .grid-container {display: grid; grid-template-columns: repeat(3, 1fr);  grid-gap:8px 7px;}
    .grid-container > div:first-child {grid-column: span 1;}
    .grid-item1 div {font-size: 3.2vw; bottom: 9%;}
    .grid-item1 img {width: 80%; z-index: 1; position: relative; overflow: hidden; min-width: 110px;}
}

@media (max-width: 350px) { /* or 301 if you want really the same as previously.  */
    .grid-container {display: grid; grid-template-columns: repeat(2, 1fr);}
    .grid-container > div:first-child {grid-column: span 1;}
    .grid-item1 div {font-size: 11px;}
	}







/* --- look "disordinato" leggero --- */
.grid-container {
  align-items: start;                 /* lascia spazio a traslazioni verticali */
}

/* base */
.grid-item1 {
  transform-origin: 50% 60%;
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
	/*filter: brightness(0.3); */
}
.grid-item1.old:hover {filter: filter: brightness(1.25) saturate(1.5) sepia(0.3) hue-rotate(-15deg) drop-shadow(0 0 12px rgba(255, 60, 0, 0.7));
  transform: scale(1.05);}
/* raddrizzo un filo al passaggio, senza togliere il carattere */
.grid-item1:hover {
  transform: rotate(0deg) translate(0,0) scale(1.03);
  z-index: 3;
}

/* leggere variazioni pezzo per pezzo 
.grid-container > .grid-item1:nth-child(1) { transform: rotate(-3deg) translateY(4px)  scale(.98); }
.grid-container > .grid-item1:nth-child(2) { transform: rotate(2.5deg) translateY(-10px) scale(1.02); }
.grid-container > .grid-item1:nth-child(3) { transform: rotate(-1.5deg) translate(6px, 6px); }
.grid-container > .grid-item1:nth-child(4) { transform: rotate(3deg)  translate(-6px, -4px) scale(1.01); }

.grid-container > .grid-item1:nth-child(5) { transform: rotate(-14deg) translate(112px, -2px) }
.grid-container > .grid-item1:nth-child(6) { transform: rotate(3.5deg) translate(136px, -10px) scale(.99) }
.grid-container > .grid-item1:nth-child(7) { transform: rotate(-2deg) translate(195px, 2px); }
.grid-container > .grid-item1:nth-child(8) { transform: rotate(3.5deg) translate(-10px, 6px) scale(1.01); }
*/
/* piccola oscillazione (solo per gli attivi), molto più soft dell'attuale */
.grid-item1.attiva {
  animation: wobble 2.8s ease-in-out infinite;
}

@keyframes wobble {
  0%   { transform: translate(0,0)    rotate(0deg)   }
  25%  { transform: translate(1px,2px) rotate(1.3deg)}
  50%  { transform: translate(-1px,0)  rotate(-1.3deg)}
  75%  { transform: translate(1px,-1px) rotate(.8deg)}
  100% { transform: translate(0,0)    rotate(0deg)   }
}

/* piccole differenze di profondità */
.grid-container > .grid-item1:nth-child(odd)  { z-index: 1; }
.grid-container > .grid-item1:nth-child(even) { z-index: 2; }

/* immagini leggermente “pop” e non perfettamente centrate */
.grid-item1 img {
  transform: translateY(2px);
  will-change: transform;
}

/* accessibilità: riduci i movimenti se richiesto dal sistema */
@media (prefers-reduced-motion: reduce) {
  .grid-item1,
  .grid-item1.attiva { animation: none; transition: none; }
  .grid-container > .grid-item1:nth-child(n) { transform: none; }
}

/* mobile: asimmetria più leggera per non impastare */
@media (max-width: 567px) {
  .grid-container > .grid-item1:nth-child(n) { 
    transform: none;                         /* base */
  }
  .grid-container > .grid-item1:nth-child(odd)  { transform: rotate(-1deg); }
  .grid-container > .grid-item1:nth-child(even) { transform: rotate(1deg);  }
}