@media screen and (min-width: 1001px) and (max-width: 10000px) {
    .photo .header {
        margin: 0px 0px 2vw 0px !important;
    }
    .photo .textAll {
        width: 100% !important;
        margin: 0px 0px 2vw 0px;
    }
    .masonry {
        transition: all 0.5s ease-in-out;
        column-gap: 2vw;
        column-fill: initial;
        column-count: 4;
    }
    .masonry .brick {
        margin-bottom: 2vw;
        display: inline-block; /* Fix the misalignment of items */
        vertical-align: top; /* Keep the item on the very top */
    }
    .masonry .brick img {
        max-width: 100%;
        vertical-align: middle;
        transition: all 0.5s ease-in-out;
        backface-visibility: hidden;
    }
    .brick:hover .photo__box--foto .img {
        transform: scale(1.1);
    }
    .photo__box--foto {
        float: left;
        width: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid #eeeeee;
    }
    .photo__box--name {
        float: left;
        width: 100%;
        position: relative;
        margin: 1vw 0px 0.2vw 0px;
        padding: 0px 0px 0px 0px;
        color: #23365a;
        font-size: 1vw;
        font-weight: 700;
        line-height: 1.1vw;
        text-decoration: none;
        letter-spacing: 0px;
    }
    .photo__box--text {
        float: left;
        width: 100%;
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        color: #23365a;
        font-size: 0.9vw;
        font-weight: 400;
        line-height: 1vw;
        text-decoration: none;
        letter-spacing: 0px;
    }
}

@media screen and (min-width: 0px) and (max-width: 1000px) {
    .photo .header {
        margin: 0px 0px 4vw 0px !important;
    }
    .photo .textAll {
        width: 100% !important;
        margin: 0px 0px 8vw 0px;
    }
    .masonry {
        transition: all 0.5s ease-in-out;
        column-gap: 0vw;
        column-fill: initial;
        column-count: 1;
    }
    .masonry .brick {
        margin-bottom: 6vw;
        display: inline-block; /* Fix the misalignment of items */
        vertical-align: top; /* Keep the item on the very top */
    }
    .masonry .brick img {
        max-width: 100%;
        vertical-align: middle;
        transition: all 0.5s ease-in-out;
        backface-visibility: hidden;
    }
    .brick:hover .photo__box--foto .img {
        transform: scale(1.1);
    }
    .photo__box--foto {
        float: left;
        width: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid #eeeeee;
    }
    .photo__box--name {
        float: left;
        width: 100%;
        position: relative;
        margin: 2vw 0px 1vw 0px;
        padding: 0px 0px 0px 0px;
        color: #23365a;
        font-size: 5vw;
        font-weight: 700;
        line-height: 6vw;
        text-decoration: none;
        letter-spacing: 0px;
    }
    .photo__box--text {
        float: left;
        width: 100%;
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        color: #23365a;
        font-size: 4vw;
        font-weight: 400;
        line-height: 5vw;
        text-decoration: none;
        letter-spacing: 0px;
    }
}