.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}

.grid-item {
    font-size: 14px;
    background-color: #333;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: .8s opacity;
}

.grid-layout:hover .grid-item{opacity: 0.3;}
.grid-layout:hover .grid-item:hover{opacity: 1;}

.grid-content {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-end;
}

.grid-text{
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    text-align: center;
    width: 100%;
}

.grid-layout:hover .grid-item:hover .grid-text{background: rgba(15,69,110, 0.9);}
.grid-layout:hover .grid-item:hover .grid-text p,
.grid-layout:hover .grid-item:hover .grid-text h4{color:#fff;}

.grid-text h4{
    font-weight: 400;
    text-transform: uppercase;
    font-size: 20px;
}

.grid-text p{
    margin: 0;
}

.grid-item:nth-child(odd) {
    background-color: #424242;
}

.grid-span-4-4 {
    grid-column-end: span 6;
    grid-row-end: span 4;
}

.grid-span-4-3 {
    grid-column-end: span 6;
    grid-row-end: span 3;
}

.grid-span-3-5 {
    grid-column-end: span 12;
    grid-row-end: span 3;
}