@supports (display: grid) {
    .section {
        display: block;
    }
}

.grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 150px;
    grid-auto-flow: row dense;
}

.item {
    position: relative;
    color: #fff;
    background: url("../../img/projects/project1.jpg");
    background-size: cover;
    background-position: center;
    cursor: pointer;
    counter-increment: item-counter;

    -webkit-filter: grayscale(1);
}
.item:nth-of-type(2n) {
    background-image: url("../../img/projects/project2.jpg");
}
.item:nth-of-type(3n) {
    background-image: url("../../img/projects/project3.jpg");
}
.item:nth-of-type(4n) {
    background-image: url("../../img/projects/project4.jpg");
}
.item:nth-of-type(5n) {
    background-image: url("../../img/projects/project5.jpg");
}
.item:nth-of-type(6n) {
    background-image: url("../../img/projects/project6.jpg");
}
.item:nth-of-type(7n) {
    background-image: url("../../img/projects/project7.jpg");
}
.item:nth-of-type(8n) {
    background-image: url("../../img/projects/project8.jpg");
}
.item:nth-of-type(9n) {
    background-image: url("../../img/projects/project9.jpg");
}
.item:nth-of-type(10n) {
    background-image: url("../../img/projects/project10.jpg");
}
.item:nth-of-type(11n) {
    background-image: url("../../img/projects/project11.jpg");
}
.item:nth-of-type(12n) {
    background-image: url("../../img/projects/project12.jpg");
}
.item:nth-of-type(13n) {
    background-image: url("../../img/projects/project13.jpg");
}
.item:nth-of-type(14n) {
    background-image: url("../../img/projects/project14.jpg");
}
.item:nth-of-type(15n) {
    background-image: url("../../img/projects/project15.jpg");
}
.item:nth-of-type(16n) {
    background-image: url("../../img/projects/project16.jpg");
}
.item:nth-of-type(17n) {
    background-image: url("../../img/projects/project17.jpg");
}
.item:nth-of-type(18n) {
    background-image: url("../../img/projects/project18.jpg");
}
.item:nth-of-type(19n) {
    background-image: url("../../img/projects/project19.jpg");
}
.item:nth-of-type(20n) {
    background-image: url("../../img/projects/project20.jpg");
}
.item:nth-of-type(21n) {
    background-image: url("../../img/projects/project21.jpg");
}
.item:nth-of-type(22n) {
    background-image: url("../../img/projects/project22.jpg");
}
.item:nth-of-type(23n) {
    background-image: url("../../img/projects/project23.jpg");
}
.item:nth-of-type(24n) {
    background-image: url("../../img/projects/project24.jpg");
}


.item:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.15;
    transition: opacity 0.3s ease-in-out;
}
.item:hover {
    filter: none;
}
.item:hover:after {
    opacity: 0;
}
.item--medium {
    grid-row-end: span 2;
}
.item--large {
    grid-row-end: span 3;
}
.item--full {
    grid-column-end: auto;
}
@media screen and (min-width: 768px) {
    .item--full {
        grid-column: 1/-1;
        grid-row-end: span 2;
    }
}




/**********************/
/*** Pagination ******/
/*********************/
.pagination{
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #ec1f26;
    color: white;
    pointer-events: none;
    cursor: default;
}
.pagination a.activeA {
    pointer-events: none;
    cursor: default;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}