.mediaGrid{
    display: grid;
    grid-column-gap: 20px;
    row-gap: 20px;
    position:relative;
}
.mediaGrid a{
    text-decoration:none;
}
.mediaGrid .gridItem{
    overflow: hidden;
    border-radius:4px;
}
.mediaGrid .gridItem img{
    border-radius:4px;
}
.mediaGrid .gridTitle{
    font-size:14px;
    text-align:left;
    padding:10px 15px;
    color:#222;
    overflow-y:hidden;
}
.mediaGrid .gridSubTitle{
    text-align:left;
    padding:10px 15px;
}
.mediaGrid .gridItem:hover{
    background:#e5e5e5;
}

.gridBlack .gridItem .gridTitle{
    color:#fff;
}
.gridBlack .gridItem:hover{
    background:#666;
}

.banFolder{
    margin:10px auto;
    border:1px solid #ccc;
    padding:3px;
}
.ban980x110{
    width:980px;
    min-height:110px;
}
.banItem img{
    display:block;
    max-width:100%;
}

@media(min-width: 768px){
    .mediaGrid{
		grid-template-columns: repeat(4, 1fr);
	}
}

@media(max-width: 768px){
    .mediaGrid{
		grid-template-columns: repeat(3, 1fr);
	}
    .ban980x110{
        width:100%;
        height:auto;
    }
}

@media(max-width: 480px){
    .mediaGrid{
		grid-template-columns: repeat(1, 1fr);
	}
}