*.
*::before,
*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}
.title{
  text-align: center;
  padding: 2.5rem 0;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-decoration: underline;
  text-decoration-color: #e7dac2;
  font-size: 2rem;
  font-family: sans-serif;
}
.gallery{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 133px);
  grid-auto-rows: 200px;
  justify-content: center;
  gap: 1rem;
}
.gallery_item{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
grid-column: span 2;
height: 283px;
transition: 0.5s filter;
position: relative;
}


.capa{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0;
  text-transform: uppercase;
  letter-spacing: 5px;
  
  font-size: 2rem;
  font-family: sans-serif;
}

.gallery_item:hover{
  filter: brightness(0.8);
}
.gallery_item:first-of-type{
  grid-column: 2 / span 2;
}

/*MEDIA QUERIES*/
@media screen and (min-width: 270px) and (max-width:504px) {
  .gallery_item:first-of-type{
    grid-column: 1 / span 2;
  }
  .gallery{
    grid-auto-rows: 283px;
  }
}
@media screen and (min-width: 505px) and (max-width:685px){
  .gallery_item:nth-of-type(odd){
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 686px) and (max-width:862px){
  .gallery_item:nth-of-type(2n+1) {
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 862px) and (max-width:1038px){
  .gallery_item:nth-of-type(3n+1) {
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 1039px) and (max-width:1215px){
  .gallery_item:nth-of-type(4n+1) {
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 1216px) and (max-width:1391px){
  .gallery_item:nth-of-type(5n+1) {
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 1392px){
  .gallery_item:nth-of-type(6n+1) {
    grid-column: 2 / span 2;
  }
}