*.
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;

    /*background-color: darkcyan;*/
    display: grid;
    /*grid-template-columns: repeat(auto-fit,133px);*/
    grid-template-columns: repeat(auto-fit,66px);
    /*grid-auto-rows: 200px;*/
    grid-auto-rows: 100px;
    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; /* 266px +17px = 283px */
    /*height: 283px;*/ /* Desbordamiento de 83px*/
    height: 149px; /* Desbordamiento de 41px*/
    transition: 0.2s filter;
}

.gallery__item:hover{
    filter: brightness(0.8);
}

.gallery__item:first-of-type {
    grid-column: 2 / span 2;
}

/* MEDIA QUERIES */
@media screen and (min-width: 269px) and (max-width: 311px) {
    .gallery__item:first-of-type {
        grid-column: 1 / span 2;
    }
    .gallery {
        grid-auto-rows: 149px;
    }
}

@media screen and (min-width: 312px) and (max-width: 393px) {
    .gallery__item:nth-of-type(odd) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 394px) and (max-width: 500px) {
    .gallery__item:nth-of-type(4n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 501px) and (max-width: 557px) {
    .gallery__item:nth-of-type(5n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 558px) and (max-width: 721px) {
    .gallery__item:nth-of-type(6n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 722px) and (max-width: 885px) {
    .gallery__item:nth-of-type(8n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 886px) and (max-width: 1049px) {
    .gallery__item:nth-of-type(10n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 1050px) and (max-width: 1213px) {
    .gallery__item:nth-of-type(12n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 1214px) and (max-width: 1377px) {
    .gallery__item:nth-of-type(14n+1) {
        grid-column: 2 / span 2;
    }
}

@media screen and (min-width: 1378px) {
    .gallery__item:nth-of-type(15n+1) {
        grid-column: 2 / span 2;
    }
}