.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.core-mosaic.mosaic-ugc.controlled-width {
    max-width: var(--width-base);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

.core-mosaic.mosaic-ugc .mosaic-tile-inner.img-cont .credits {
    z-index: 3;
    color: white;
    font-size: 14px;
    max-width: 77%;
    text-shadow: #000 1px 0 10px;
    font-weight: 500;
    font-family: var(--font-display);
    position: relative;
    padding: 5px 0px 0px 5px;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(odd) .mosaic-tile-inner {
    padding-bottom: 82%;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(even) .mosaic-tile-inner {
    padding-bottom: 53%;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(odd) {
    flex-basis: 33.333%; 
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(even) {
    flex-basis: 43.333%;
}


.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile {
    flex: 1 1 auto; 
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(1),
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(11) {
    flex-grow: 1;
  
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(2),
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(12) {
    flex-grow: 3; 
   
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(3),
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(13) {
    flex-grow: 2;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(3) .mosaic-tile-inner,
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) .mosaic-tile-inner,
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(13) .mosaic-tile-inner  {
    padding-bottom: 95%;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(4),
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(14) {
    flex-grow: 1; 
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(4) .mosaic-tile-inner,
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) .mosaic-tile-inner,
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(14) .mosaic-tile-inner {
    padding-bottom: 90%;
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(5),
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(15) {
    flex-grow: 1; 
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(6) {
    flex-grow: 2; 
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(6) .mosaic-tile-inner {
    padding-bottom: 57%;
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) {
    flex-grow: 2; 
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) {
    flex-grow: 1;  
}
.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9) {
    flex-grow: 2;
}

.core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) {
    flex-grow: 6; 
}

@media (min-width:   40em) {
    .core-mosaic.mosaic-ugc .mosaic-tile .tile-img {
        width: 100%;
        height: 100%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(4),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(14) {
            flex-basis: 23.333%;
    }

    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(3) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(13) .mosaic-tile-inner  {
            padding-bottom: 60%;
    }

    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(5) .mosaic-tile-inner, 
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(15) .mosaic-tile-inner {
            padding-bottom: 65%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) .mosaic-tile-inner {
            padding-bottom: 70%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9) .mosaic-tile-inner {
            padding-bottom: 87%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) .mosaic-tile-inner {
            padding-bottom: 45%;
    }
}

@media (min-width:   64em) {
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(odd) {
        flex-basis: 23.333%; 
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(even) {
        flex-basis: 33.333%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) {
        flex-basis: 23.333%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) {
         flex-basis: 15%;
    }

    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(3) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(13) .mosaic-tile-inner {
         padding-bottom: 77%;
    }

    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(odd) .mosaic-tile-inner {
        padding-bottom: 86%;
    }

    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(4) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(14) .mosaic-tile-inner {
        padding-bottom: 60%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9) .mosaic-tile-inner {
        padding-bottom: 80%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(5) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(15) .mosaic-tile-inner {
        padding-bottom: 84%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) .mosaic-tile-inner {
        padding-bottom: 120%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) .mosaic-tile-inner {
        padding-bottom: 55%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(1) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(11) .mosaic-tile-inner {
        padding-bottom: 97%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(2) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(12) .mosaic-tile-inner {
        padding-bottom: 60%;
    }
}


@media (min-width:   75em) {
    .img-cont .credits {
        display: none;
    }
    .img-cont:hover .credits {
        display: block;
    }
    .core-mosaic.mosaic-ugc .mosaic-tile-inner.img-cont .credits {
        font-size: 16px;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(odd) {
        flex-basis: 13.333%; 
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(even) {
        flex-basis: 23.333%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) {
        flex-basis: 13.333%;
   }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(6),
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9) {
        flex-basis: 23.333%;
   }

   .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(1) .mosaic-tile-inner,
   .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(5) .mosaic-tile-inner,
   .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(11) .mosaic-tile-inner,
   .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(15) .mosaic-tile-inner {
        padding-bottom: 122%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(2) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(12) .mosaic-tile-inner {
        padding-bottom: 65%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(3) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(13) .mosaic-tile-inner {
        padding-bottom: 111%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(4) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(14) .mosaic-tile-inner {
        padding-bottom: 73%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(6) .mosaic-tile-inner,
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(9) .mosaic-tile-inner {
        padding-bottom: 69%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(7) .mosaic-tile-inner {
        padding-bottom: 115%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(8) .mosaic-tile-inner {
        padding-bottom: 122%;
    }
    .core-mosaic.mosaic-ugc .mosaic-tiles-wrapper .mosaic-tile:nth-child(10) .mosaic-tile-inner {
        padding-bottom: 92%;
    }
    .core-mosaic.mosaic-ugc.with-overlay  .mosaic-tile .mosaic-tile-inner:after {
        content: "";
        height: 100%;
        width: 100%;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: .1;
        pointer-events: none;
        transition: background ease-out 400ms, opacity ease-out 400ms;
    }
    .core-mosaic.mosaic-ugc.with-overlay .mosaic-tile .mosaic-tile-inner:hover::after{
		background: #000;
		opacity: 0.5;
	}
    .core-mosaic.mosaic-ugc .mosaic-tile .mosaic-tile-link {
        z-index: 1;
    }
}







