body{
    padding: 10px;
     }

  nav {
  display: flex;
      width: 100%;
      height:40px;
  font-size: 1.5rem;
  background-color:#60bc5c;
  color: white;
    
   }
   .flecha{
    padding: 5px;
   text-decoration: none;
   color: aliceblue;
     }
   .titulo{
      display: inline-flex;
          width: 100%;
          height:40px;
      font-size: 2rem;
     justify-content: center;
     font-family:  Tahoma, Verdana, sans-serif;
     
    }
  
     
   .galeria{
   display: grid;
   grid-template-columns: repeat(6 , 1fr);
   grid-auto-rows: 150px;
   padding: 20px;
  grid-gap: 10px;
  
    }
    
  .galeria_img{
   width: 100%;
   height: 100%;
   object-fit: contain;
  
    }
    .galeria_item{ 
      position: relative;
      border: 1px solid rgb(180, 180, 180);
      
  }  
  .galeria_img:hover {
      z-index: 1000;
      transition: 4s;
      transform: scale(2.5);
      position: relative;
      background: linear-gradient(rgba(251, 252, 253, 0.75), rgba(206, 214, 235, 0.75));
  
  } 
      /*
    .galeria_item:nth-child(4){      la imagen 4
      grid-column-start: span 2;     se estire 2 filAA   pero podes poner row y se estira para abajo
       }
   */
  
  
   .galeria_titulo{ 
      position: absolute;
      bottom: 0;
      color: #643205;
      /*background: linear-gradient(rgba(251, 252, 253, 0.75), rgba(206, 214, 235, 0.75));es un fondo de las letras por si la imagen es masiza*/
      padding: 3px;
      height: 1rem;
  }  
  .triangulo{
    color: rgb(167, 8, 40);
    position: absolute;
    bottom: 0;
    font-size: 1.2rem;
    padding: 3px;
    }
    
  
  
  /*----------------media Queries-------------------------*/
  @media screen and (min-width:200px) and (max-width: 269px) {
      .galeria{
         grid-template-columns: repeat(1 , 1fr);/* que en esta resolucion tenga 3 columnas en lugar de 6*/
        }   
  }
  @media screen and (min-width:270px) and (max-width:400px) {
      .galeria{
         grid-template-columns: repeat(2 , 1fr);/* que en esta resolucion tenga 3 columnas en lugar de 6*/
        }   
  }
  @media screen and (min-width:401px) and (max-width: 504px) {
      .galeria{
         grid-template-columns: repeat(3 , 1fr);/* que en esta resolucion tenga 3 columnas en lugar de 6*/
        }   
  }
  
  @media screen and (min-width:505px) and (max-width: 685px) {
      .galeria{
          grid-template-columns: repeat(4 , 1fr);/* que en esta resolucion tenga 3 columnas en lugar de 6*/
         } 
  }
  
  @media screen and (min-width:686px) and (max-width: 862px) {
      .galeria{
          grid-template-columns: repeat(5 , 1fr);/* que en esta resolucion tenga 3 columnas en lugar de 6*/
         } 
  }
  
  
  