



.grid-view-tut {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 80%;
    grid-template-rows: repeat(8, 720px);
    grid-gap: 12px;
}


.tutorial-footer {
    opacity: 1;
}
.tutorial-image {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 100%;
    width: 100%;
}

@media (min-width: 360px) {
    .grid-view-tut {
        grid-template-columns: 1fr ;
        grid-template-rows: repeat(16, 720px);
    }
    .tutorial-footer {
        opacity: 0;
    }
}
@media (min-width: 768px) {
    .grid-view-tut {
        grid-template-columns: 1fr ;
        grid-template-rows: repeat(16, 720px);
    }
    .tutorial-footer {
        opacity: 0;
    }
}
@media (min-width: 1024px) {
    .grid-view-tut {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(8, 720px);
    }
    .tutorial-footer {
        opacity: 1;
    }
}
@media (min-width: 1400px) {
    .grid-view-tut {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(8, 720px);
    }
    .tutorial-footer {
        opacity: 1;
    }
}