.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-gap: 120px;
    justify-items: center;
    align-items: center;
    /*max-width: 700px;*/
    margin: auto;
    margin-top: 50px;
}

#promo-natale24\  > div > div > p {min-height: 150px;}

.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;
    
   /* 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;
    animation-name: rotateFeather;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
	
}

.grid-item1.old {cursor: pointer;}
/*
.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: 100%; z-index: 1; position: relative; overflow: hidden;min-width: 250px; margin-bottom: 0px;}
/*.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: #002742; margin: auto; font-size: 2vw; font-size: 16px; font-weight: bold;}
.grid-item1.attiva:hover div,  .grid-item1.old:hover div {color:#1657b9;}

#MainSite {background-image: url('https://cdn-ltm.betflag.it/info/media/20272/speciale-promo01.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/20290/speciale-promo01-mobile-apr26c.jpg');  background-repeat: no-repeat;  background-position: top center; min-height:1080px; margin-left: -20px;
        margin-right: -20px;}
@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: 100px) { 
	.grid-container { display: grid; grid-template-columns: repeat(2, 2fr);	}
	.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: 2vw;}
	.grid-container {margin: 15px; margin-top: 100px; grid-gap: 15px;}
	#header_content {margin-left: -15px; margin-right: 0;}
	.grid-item1 img {width: 45%; z-index: 1; position: relative; overflow: hidden; margin: auto; min-width: 165px;}
	#promo-natale24\  > div > div > p {min-height: auto;}
	#promo-natale24\  > div > div > p { margin-bottom: 0}
	#promo-natale24\  > div:nth-child(3) { margin-bottom: 30px; margin-top: -40px;}
	#promo-natale24\  > div:nth-child(2)  { margin-top: -25px;}
	
}
@media (max-width: 567px) { /* or 301 if you want really the same as previously.  */
	.grid-container {display: grid; grid-template-columns: repeat(1, 1fr);}
	.grid-container > div:first-child {grid-column: span 1;}
	.grid-item1 div {font-size: 3.4vw; bottom: 9%;}
	
	
}

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