:root {
--gallerygap: 1rem;
}
@media screen and (max-width: 768px) {
:root {
--gallerygap: 0.5rem;
}
}
div[data-gap="no"] {
--gallerygap: 0px;
}
div.my_gallery *,
div.my_mansory *,
div.my_carousel * {
box-sizing: border-box;
}
div.my_gallery figure,
div.my_mansory figure,
div.my_carousel figure,
div.my_gallery figcaption,
div.my_mansory figcaption,
div.my_carousel figcaption {
display: block;
padding: 0;
position: relative;
margin: 0;
overflow: hidden;
}
div.my_gallery figcaption,
div.my_mansory figcaption,
div.my_carousel figcaption {
background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 70%, transparent);
bottom: 0;
color: #fff;
font-size: smaller;
left: 0;
max-height: 60%;
overflow: hidden;
padding: 0 8px 8px;
position: absolute;
text-align: center;
width: 100%;
pointer-events: none;
}
div.my_gallery figcaption a,
div.my_mansory figcaption a,
div.my_carousel figcaption a {
pointer-events: visible;
display: block;
margin: 0;
padding: 0;
color: #fff;
text-decoration: none;
}
figcaption a:after {
content: " >";
}
div.my_gallery img,
div.my_mansory img,
div.my_carousel img {
max-width: 100%;
}
div.my_gallery {
display: flex;
flex-wrap: wrap;
gap: var(--gallerygap);
clear: both;
justify-content: left;
}
div.my_gallery figcaption {
position: absolute;
bottom: 0;
width: 100%;
max-height: 100%;
overflow: hidden;
padding: 30px 20px 10px !important;
color: #fff;
text-align: center;
font-size: smaller;
background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 70%, transparent);
margin: 0;
z-index: 100;
}
div.my_gallery.column-2 > div {
width: calc((100% - (1 * var(--gallerygap))) / 2)
}
div.my_gallery.column-3 > div {
width: calc((100% - (2 * var(--gallerygap))) / 3)
}
div.my_gallery.column-4 > div {
width: calc((100% - (3 * var(--gallerygap))) / 4)
}
div.my_gallery.column-5 > div {
width: calc((100% - (4 * var(--gallerygap))) / 5)
}
div.my_gallery.column-6 > div {
width: calc((100% - (5 * var(--gallerygap))) / 6)
}
div.my_gallery.column-7 > div {
width: calc((100% - (6 * var(--gallerygap))) / 7)
}
div.my_gallery.column-8 > div {
width: calc((100% - (7 * var(--gallerygap))) / 8)
}
div.my_gallery.column-9 > div {
width: calc((100% - (8 * var(--gallerygap))) / 9)
}
@media screen and (min-width: 768px) and (max-width:1024px) {
div.my_gallery.column-4 > div,
div.my_gallery.column-5 > div {
width: calc((100% - (2 * var(--gallerygap))) / 3)
}
div.my_gallery.column-6 > div,
div.my_gallery.column-7 > div {
width: calc((100% - (3 * var(--gallerygap))) / 4)
}
div.my_gallery.column-8 > div,
div.my_gallery.column-9 > div {
width: calc((100% - (4 * var(--gallerygap))) / 5)
}
}
@media screen and (min-width: 480px) and (max-width:767px) {
div.my_gallery.column-4 > div,
div.my_gallery.column-5 > div {
width: calc((100% - (2 * var(--gallerygap))) / 3)
}
div.my_gallery.column-6 > div,
div.my_gallery.column-7 > div {
width: calc((100% - (3 * var(--gallerygap))) / 4)
}
div.my_gallery.column-8 > div,
div.my_gallery.column-9 > div {
width: calc((100% - (4 * var(--gallerygap))) / 5)
}
}
@media screen and (max-width: 479px) {
div.my_gallery.column-2 > div,
div.my_gallery.column-3 > div {
width: 100%;
}
div.my_gallery.column-4 > div,
div.my_gallery.column-5 > div,
div.my_gallery.column-6 > div,
div.my_gallery.column-7 > div {
width: calc((100% - (1 * var(--gallerygap))) / 2)
}
div.my_gallery.column-8 > div,
div.my_gallery.column-9 > div {
width: calc((100% - (2 * var(--gallerygap))) / 3)
}
} div.my_mansory {
-webkit-column-gap: var(--gallerygap);
-moz-column-gap: var(--gallerygap);
column-gap: var(--gallerygap);
}
div.my_mansory figure {
display: block;
overflow: hidden;
width: 100% !important;
padding: 0;
position: relative;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: var(--gallerygap);
}
div.my_mansory.mansory-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div.my_mansory.mansory-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_mansory.mansory-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div.my_mansory.mansory-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
div.my_mansory.mansory-6 {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
div.my_mansory.mansory-7 {
-moz-column-count: 7;
-webkit-column-count: 7;
column-count: 7;
}
div.my_mansory.mansory-8 {
-moz-column-count: 8;
-webkit-column-count: 8;
column-count: 8;
}
div.my_mansory.mansory-9 {
-moz-column-count: 9;
-webkit-column-count: 9;
column-count: 9;
}
@media screen and (min-width: 768px) and (max-width:1024px) {
div.my_mansory.mansory-4 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_mansory.mansory-5,
div.my_mansory.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div.my_mansory.mansory-7,
div.my_mansory.mansory-8,
div.my_mansory.mansory-9 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
@media screen and (min-width: 480px) and (max-width:767px) {
div.my_mansory.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div.my_mansory.mansory-5 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_mansory.mansory-6,
div.my_mansory.mansory-7,
div.my_mansory.mansory-8,
div.my_mansory.mansory-9 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (max-width: 479px) {
div.my_mansory.mansory-2,
div.my_mansory.mansory-3 {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
div.my_mansory.mansory-4,
div.my_mansory.mansory-5,
div.my_mansory.mansory-6,
div.my_mansory.mansory-7,
div.my_mansory.mansory-8,
div.my_mansory.mansory-9 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
[data-fullwidth="1"] {
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.round-4 figure {
border-radius: 4px;
}
.round-8 figure {
border-radius: 8px;
}
.round-12 figure {
border-radius: 12px;
}
.round-16 figure {
border-radius: 16px;
}
.round-20 figure {
border-radius: 20px;
}
.round-24 figure {
border-radius: 24px;
}
.round-28 figure {
border-radius: 28px;
}
.round-32 figure {
border-radius: 32px;
}
.round-36 figure {
border-radius: 36px;
}
.round-40 figure {
border-radius: 40px;
}
.round-44 figure {
border-radius: 44px;
}
.round-48 figure {
border-radius: 48px;
}
.round-52 figure {
border-radius: 52px;
}
.round-56 figure {
border-radius: 56px;
}
.round-60 figure {
border-radius: 60px;
}
.round-64 figure {
border-radius: 64px;
}