body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.Conteiner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 50px);
  gap: 4px;
  width: 500px;
  margin: 0 auto;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  border: 4px solid #1a1a1a;
  padding: 5px;
  overflow: visible;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.title{
 grid-column:  1 / 7;
  grid-row: 1 / 1;
 
  background-color: red;
  color: white;              
  font-size: 24px;           
  font-weight: bold;        
  display: flex;            
  align-items: center;       
  justify-content: center;   
  border-radius: 10px;       
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
  text-transform: uppercase; 
}

.img1 {
  overflow: hidden;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  border-radius: 5%;
}
.img1:hover {
  transform: scale(1.5); /* Zoom de 1.5x */
}

.img2 {
  overflow: hidden;
  grid-column: 3 / 6;
  grid-row: 2 / 4;
   border-radius: 5%;
}
.img2:hover {
  transform: scale(1.5);
  
}

.img3 {
  overflow: hidden;
  grid-column: 6 / 7;  
  grid-row: 2 / 4;
   border-radius: 5%;
}
.img3:hover {
  transform: scale(1.5);
  
}

.img4 {
  overflow: hidden;
  grid-column: 1 / 3;
  grid-row: 4 / 7;
   border-radius: 5%;
}

.img4:hover {
  transform: scale(1.5);
  
}

.img5 {
  overflow: hidden;
  grid-column: 3 / 4;  
  grid-row: 4 / 7;
   border-radius: 5%;
}

.img5:hover {
  transform: scale(1.5);
  
}

.img6 {
  overflow: hidden;
  grid-column: 4 / 6;
  grid-row: 4 / 6;
   border-radius: 5%;
}

.img6:hover {
  transform: scale(1.5);
  
}

.img7 {
  overflow: hidden;
  grid-column: 6 / 7;  
  grid-row: 4 / 5;   
     border-radius: 5%;
}

.img7:hover {
  transform: scale(1.5);
  
}

.img8 {
  overflow: hidden;
  grid-column: 4 / 5;  
  grid-row: 6 / 7;
   border-radius: 5%;
}
.img8:hover {
  transform: scale(1.5);
  
}

.img9 {
  overflow: hidden;
  grid-column: 6 / 7;  
  grid-row: 5 / 5;   
     border-radius: 5%;
}
.img9:hover {
  transform: scale(1.5);
  
}

.img10 {
  overflow: hidden;
  grid-column:  6 / 5;
  grid-row: 6 / 6;
   border-radius: 5%;
}
.img10:hover {
  transform: scale(1.5);
  
}

.img11 {
  overflow: hidden;
  grid-column:  6 / 6;
  grid-row: 6 / 6;
   border-radius: 5%;
}
.img11:hover {
  transform: scale(1.5);
  
}

.text{
 overflow: hidden;
  grid-column:  1 / 7;
  grid-row: 7 / 7;
  text-align: center;
}