*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
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: rgb(26, 1, 19);
    font-size: 2.4rem;
    font-family: sans-serif;
}
.gallery {
    width: 85%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    

    /*background-color: rgb(255, 0, 221);*/
    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;
}
.gallery_item:hover{
    filter: brightness(0.3);
}
.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{
        grid-column: 2 / span 2;
    }
  
}
@media screen and (min-width: 686px) and (max-width: 862px) {
    .gallery_item:nth-of-type(3n + 1){
        grid-column: 2 / span 2;
    }
  
}
@media screen and (min-width: 863px) and (max-width: 1038px) {
    .gallery_item:nth-of-type(4n + 1){
        grid-column: 2 / span 2;
    }
  
}
@media screen and (min-width: 1039px) and (max-width: 1215px) {
    .gallery_item:nth-of-type(5n + 1){
        grid-column: 2 / span 2;
    }
  
}
@media screen and (min-width: 1216px) and (max-width: 1391px) {
    .gallery_item:nth-of-type(6n + 1){
        grid-column: 2 / span 2;
    }
  
}
@media screen and (min-width: 1392px) {
    .gallery_item:nth-of-type(7n + 1){
        grid-column: 2 / span 2;
    }
  
}