:root {
--gap: 0rem;
}
.content-box {
max-width: 1920px;
padding: 0 3rem;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
:root {
--gap: 0.5rem;
}
.content-box {
padding: 0 1rem!important;
}
}
@media screen and (min-width: 769px) and (max-width: 1280px) {
}
.wide {
margin-left: calc(((100vw - 1400px + 1rem) / 2) * -1);
margin-right: calc(((100vw - 1400px + 1rem) / 2) * -1);
padding-left: calc((100vw - 1400px) / 2);
padding-right: calc((100vw - 1400px) / 2);
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
@media screen and (max-width: 1400px) {
.wide {
margin-left: calc(((100vw + 1rem) / 2) * -1);
margin-right: calc(((100vw + 1rem) / 2) * -1);
padding-left: calc((100vw + 1rem) / 2);
padding-right: calc((100vw + 1rem) / 2);
}
}
.vertical-center {
align-items: center;
}
.row {
width: calc(100% + var(--gap));
}
.offset-left {
padding-left: calc((100% - (1440px - 2rem)) / 2);
padding-right: 3rem;
}
.offset-right {
padding-right: calc((100% - (1440px - 2rem)) / 2);
padding-left: 3rem;
}
.object-fit {
object-fit: cover;
height: 100%;
}
.narrow {
max-width: 56rem;
margin: 0 auto;
}
.round {
border-radius: 50%;
}
@media screen and (max-width: 1440px) {
.offset-left {
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
}
}
.row,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
clear: both;
justify-content: space-between
}
.no-gap,
.no-gap.row {
gap: 0;
}
.no-gap.row {
width: 100%;
}
.col-1-2 {
width: calc(50% - var(--gap))
}
.col-1-3 {
width: calc(33.3333% - var(--gap))
}
.col-2-3 {
width: calc(66.6666% - var(--gap))
}
.col-1-4 {
width: calc(25% - var(--gap))
}
.col-3-4 {
width: calc(75% - var(--gap))
}
.col-1-5 {
width: calc(20% - var(--gap))
}
.col-2-5 {
width: calc(40% - var(--gap))
}
.col-3-5 {
width: calc(60% - var(--gap))
}
.col-4-5 {
width: calc(80% - var(--gap))
}
.col-1-6 {
width: calc(16.6667% - var(--gap))
}
.col-5-6 {
width: calc(83.3335% - var(--gap))
}
.no-gap .col-1-2 {
width: 50%
}
.no-gap .col-1-3 {
width: 33.3333%
}
.no-gap .col-2-3 {
width: 66.6666%
}
.no-gap .col-1-4 {
width: 25%
}
.no-gap .col-3-4 {
width: 75%
}
.no-gap .col-1-5 {
width: 20%
}
.no-gap .col-2-5 {
width: 40%
}
.no-gap .col-3-5 {
width: 60%
}
.no-gap .col-4-5 {
width: 80%
}
.no-gap .col-1-6 {
width: 16.6667%
}
.no-gap .col-5-6 {
width: 83.3335%
}
.column-2 > div,
.column-2 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-3 > div,
.column-3 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-4 > div,
.column-4 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.column-5 > div,
.column-5 article {
width: calc((100% - (4 * var(--gap))) / 5)
}
.column-6 > div,
.column-6 article {
width: calc((100% - (5 * var(--gap))) / 6)
}
.column-7 > div,
.column-7 article {
width: calc((100% - (6 * var(--gap))) / 7)
}
.column-8 > div,
.column-8 article {
width: calc((100% - (7 * var(--gap))) / 8)
}
.column-9 > div,
.column-9 article {
width: calc((100% - (8 * var(--gap))) / 9)
}
.no-gap.column-2 > div,
.no-gap.column-2 article {
width: calc(100% / 2)
}
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: calc(100% / 3)
}
.no-gap.column-4 > div,
.no-gap.column-4 article {
width: calc(100% / 4)
}
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 5)
}
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 6)
}
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 7)
}
.no-gap.column-8 > div,
.no-gap.column-8 article {
width: calc(100% / 8)
}
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 9)
} .mansory-2,
.mansory-3,
.mansory-4,
.mansory-5,
.mansory-6 {
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
}
.mansory-2 > div,
.mansory-3 > div,
.mansory-4 > div,
.mansory-5 > div,
.mansory-6 > div,
.mansory-2 > article,
.mansory-3 > article,
.mansory-4 > article,
.mansory-5 > article,
.mansory-6 > article {
display: block;
width: 100%;
margin: 0px; padding: 0;
position: relative;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.mansory-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
.mansory-6 {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
@media screen and (min-width: 768px) and (max-width:1024px) {
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 3)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-5 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (min-width: 480px) and (max-width:767px) {
.column-3 > div,
.column-3 article,
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-6 > div,
.column-6 article,
.column-7 > div,
.column-7 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-3 > div,
.no-gap.column-3 article,
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 2)
}
.no-gap.column-6 > div,
.no-gap.column-6 article,
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 3)
}
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-5 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (max-width: 479px) {
.column-2 > div,
.column-2 article,
.column-3 > div,
.column-3 article {
width: 100%
}
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.no-gap.column-2 > div,
.no-gap.column-2 article,
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: 100%
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 2)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 3)
}
.mansory-6,
.mansory-5,
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media screen and (max-width: 768px) {
.row {
width: 100%;
}
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5,
.col-1-6,
.col-5-6,
.no-gap .col-1-2,
.no-gap .col-1-3,
.no-gap .col-2-3,
.no-gap .col-1-4,
.no-gap .col-3-4,
.no-gap .col-1-5,
.no-gap .col-2-5,
.no-gap .col-3-5,
.no-gap .col-4-5,
.no-gap .col-1-6,
.no-gap .col-5-6 {
width: 100%
}
.mansory-3 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.offset-left {
padding-right: 1rem;
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
padding-left: 1rem;
}
}
@media only screen and (min-width: 600px) and (max-width: 850px) and (orientation: landscape) {
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 360px) and (max-width: 599px) {
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-width: 360px) {
.mansory-2-column,
.mansory-3-column,
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}