body.skin-citizen div.gallery {
display: flex;
margin-top: 0.8rem;
flex-wrap: wrap;
padding: 0.5rem;
gap: 0.5rem;
background-color: var( --color-surface-2 );
border-radius: var(--border-radius--medium);
max-height: calc( 340px + 1rem );
overflow-y: auto;
box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.65) !important;
border: none;
height: 20rem;
}
div.gallery div.image {
flex: 1;
flex-basis: 30%;
overflow: hidden;
position: relative;
box-sizing: border-box;
border-radius: var(--border-radius--medium);
height: 100%;
}
div.gallery div.image:after {
content: '';
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.4) 100%) repeat 0 0;
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
touch-action: none;
pointer-events: none;
z-index: 1;
}
div.gallery div.image span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: small;
color: var( --color-base--emphasized );
padding: 0.25rem 0.25rem 0.25rem 0.7rem;
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
transition: transition 200ms cubic-bezier(.77,.2,.05,1);
margin-bottom: 0;
z-index: 2;
background: linear-gradient(rgba(0,0,0,0)0%,rgba(255,255,255,0.6)100%);
pointer-events: none;
touch-action: none;
}
div.gallery div.image span a {
filter: drop-shadow(0px 0px 5px black);
pointer-events: all;
}
div.gallery.show-on-hover div.image span {
opacity: 0;
}
div.gallery.show-on-hover div.image:hover span {
opacity: 1;
}
div.gallery video,
div.gallery a.image {
flex-basis: 25%;
overflow: hidden;
margin: 0.25rem;
flex-grow: 1;
border-radius: var(--border-radius--medium);
width: 100%;
height: 100%;
}
div.gallery div.image a.image {
margin: 0;
}
div.gallery span.all-images-link {
background: var(--color-primary);
flex-basis: 100%;
border-radius: var(--border-radius--medium);
display: flex;
}
div.gallery span.all-images-link a {
font-size: 0.875rem;
color: #fff;
padding-top: 0.2rem;
width: 100%;
text-align: center;
}
div.gallery span.all-images-link:hover {
background: var(--color-primary--hover) !important;
}
div.gallery span.all-images-link:active {
background: var(--color-primary--active) !important;
}
div.gallery video,
div.gallery a.image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--border-radius--medium);
object-position: center;
}
div.gallery a.image:hover img {
transform: scale(1.1);
}
div.gallery a.image img:hover {
/*filter: opacity(0.7);*/
}
html.skin-citizen-dark div.gallery div.image span {
background: linear-gradient(rgba(0,0,0,0)0%,rgba(19,26,33,0.6)100%);
}
html.skin-citizen-light div.gallery div.image span {
color: #fff;
}
@media screen and (max-width: 768px) {
div.gallery div.image,
div.gallery a.image {
flex-basis: 45%;
}
}
@media screen and (max-width: 460px) {
div.gallery div.image,
div.gallery a.image {
flex-basis: 100%;
}
}