/* resource for grid css:  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids; */

.wrapper {
    margin: auto;
    width: 78%;
}

.grid-wrapper {
    display: grid;
    /* grid-auto-rows: 340px; */
}

@media (min-width: 1500px) {
    .col2 {
        grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
    }
    .col1 {
        grid-template-columns: 25% 25% 25% 25%;
    }
}

@media (min-width: 1024px) and (max-width: 1500px) {
    .col2 {
        grid-template-columns: 20% 20% 20% 20% 20%;
    }
    .col1 {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }
}
@media (max-width: 1023px) {
    .col2 {
        grid-template-columns: 25% 25% 25% 25%;
    }
    .col1 {
        grid-template-columns: 50% 50%;
    }
}

@media (max-width: 768px) {
    .col2 {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }
    .col1 {
        grid-template-columns: 50% 50%;
    }
}

@media (max-width: 500px) {
    .col2 {
        grid-template-columns: 50% 50%;
    }
    .col1 {
        grid-template-columns: 100%;
    }
}

div.grid-content { 
    padding: 6px;
    padding-top: 10px;
    opacity: 0.7;
    top: -75px;
    font-size: 15px;
    height: 100px;
    margin-top: -6px;
 }
 .bot div.grid-content { 
    height: 200px;
 }

div.grid-wrapper div.grid-item img {
    filter: grayscale(100%);
    max-height: 230px;
}

.grid-content span {
    display: block;
    padding-bottom: 6px;
}


div.grid-wrapper div.grid-item:hover .grid-content {
    font-size: 17px;
    height: 100px;
    filter:  sepia(30%);
       -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

div.grid-wrapper div.bot:hover .grid-content {
    height: 200px;
}


div.grid-wrapper div.grid-item:hover img{
    filter:  sepia(30%);
}