.media-grid {
    position:relative;
    background-color:#CCC;
    padding:20px;
}

.media-grid-controls {
   margin:5px;
   background-color:#FFF;
   padding:5px;
   display:inline-block;
   border-radius:5px;
   position:absolute;
   right:0px;
   top:0px;
   z-index:11;
}

.media-grid-control-button {
    width:50px;
    text-align:center;
    padding: 5px 0;
}

.media-grid-control-button.active {
    background-color: rgba(208,233,237,0.8);
}

.media-grid-control-button img {
    width:20px;
    height:20px;
}

.media-grid-detail-button {
    width:50px;
    height:50px;
    border-radius:50%;
    background-color: rgba(210,210,210,0.8);
    text-align:center;
    box-shadow: 1px 3px 8px rgba(0,0,0,0.5);
}

.media-grid-ul {
    columns: 320px;
    column-gap:20px;
}

.media-grid-group {
    margin:0 0 20px 0;
    padding:20px 21px 21px 20px;
    background-color:#EEE;
    border:1px solid #EEE;
    border-radius:5px;
    break-inside: avoid;
    position:relative;
    overflow:hidden;
}

.media-grid-group-video {
    overflow:visible;
}
.media-grid-group:hover {
    background-color:#FFF;
    border:1px solid #AAA;

}

.media-grid-li {
    list-style-type:none;
}

.media-grid-img {
    width: 100%;
    display: block;
    margin-bottom: 14px;
    box-shadow: 1px 3px 8px rgba(0,0,0,0.5);
    border-radius: 5px;
    object-fit: cover;
}
.media-grid-video {
    width:100%;
    cursor: pointer;
    box-shadow: 1px 3px 8px rgba(0,0,0,0.5);
    display: block;

}

.media-grid-video-wrap {
    border-radius: 5px;
    overflow:hidden;
}

.media-grid-img:last-child {
    margin-bottom:0;
}

.media-grid-badges {
    position:absolute;
    display:block;
    top:35px;
    right:35px;   
    z-index:10;
}

.media-grid-img-badge, .media-grid-img-detail {
    border-radius:5px;
    background-color:rgba(255,255,255,0.7);
    padding:2px 4px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2em;
    color:#333;
    z-index:10;
    width:35px;
    height:26px;
    float:right;
    margin-left:5px;
    text-align:center;
}

.media-grid-img-detail {
    width:26px;
}
.media-grid-img-detail img {
    height:20px
}
.media-grid-img-detail:hover {
    background-color:rgba(255,255,255,1.0);
}

.media-grid-img-badge img {
    width:20px;
    height:20px;
}
.media-grid-img-badge span {
    line-height:1.45;
}
.media-grid-group-overlay {
    display:none;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    margin:0 30px 30px 30px;
    border-radius:5px;
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #BBB;
    font-size:12px;
    padding:50px 10px 10px 10px;
    color:#000;
    z-index:10;
    pointer-events:none;
}
.media-grid-group-overlay a,.media-grid-group-overlay a:hover {
    color:#333;
    text-decoration: none;
}

XXX.media-grid-group:hover .media-grid-group-overlay {
    display:block;
}

.media-grid-group-overlay-wrap {
    width:100%;
    overflow:hidden;
}

.media-grid-detail-button:hover {
    background-color: rgba(255,255,255,0.8);
}

.media-grid-detail-button img {
    width:30px;
    height:30px;
    margin-top:9px;
}

.media-grid-twitter-user {
    overflow:hidden;
    position:absolute;
    bottom:6px;
    width:200px;
    color:#004400;
    float:right;
    left:50px;
    top:15px;
    text-align:left;
    font-size:14px;
}

.media-grid-twitter-user-image {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}


.media-grid-modal-image {
    max-width:100%;
}

.modal-content {
    padding:10px;
}
.modal-modal {
    min-width: 100px;
}