.grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 8px;
 }
 .item {
   background-color: #444;
   color: #fff;
   border-radius: 5px;
   overflow: hidden;
   border-radius: 8px;;
   font-size: 150%;
 }
 .mobile-only {
   display: block;
 }
 .desktop-only {
   display: none;
 }
 
   .item-0 {
     grid-column: 1 / span 2;
     grid-row: 1;
   }
   
   .item-1 {
     grid-column: 3;
     grid-row: 1;
   }
   
   .item-2 {
     grid-column: 1;
     grid-row: 2;
   }
   
   .item-3 {
     grid-column: 2;
     grid-row: 2;
   }
   
   .item-4 {
     grid-column: 3;
     grid-row: 2 / span 2;
   }
   
   .item-5 {
     grid-column: 1;
     grid-row: 3;
   }
   
   .item-6 {
     grid-column: 2;
     grid-row: 3;
   }
   @media (min-width: 768px) {
   .grid {
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     gap: 8px;
   }
   .mobile-only {
     display: none;
   }
   .desktop-only {
     display: block;
   }
   
   .item-0 {
     grid-column: 1 / span 2;
     grid-row: 1;
   }
   
   .item-1 {
     grid-column: 3;
     grid-row: 1;
   }
   
   .item-2 {
     grid-column: 1;
     grid-row: 2;
   }
   
   .item-3 {
     grid-column: 2;
     grid-row: 2;
   }
   
   .item-4 {
     grid-column: 3;
     grid-row: 2 / span 2;
   }
   
   .item-5 {
     grid-column: 1;
     grid-row: 3;
   }
   
   .item-6 {
     grid-column: 2;
     grid-row: 3;
   }
   
 }

 .whatsapp {
   text-decoration: none;
   color: #fff;
   background: rgb(25, 201, 63);
   padding: 5px 15px;
   font-size: 30px;
   border-radius: 8px;
   position: fixed;
   bottom: 25px;
   right: 25px;
   z-index: 1000;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
 }

 .whatsapp:hover{
   background: rgb(15, 161, 47);
   color: #fff;;
 }