*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --gap: 40px;
}

@media screen and (max-width: 768px) {
  :root {
    --gap: 20px;
  }
}

.content-box {
  max-width: 1400px;
  padding: 0 calc(var(--gap) / 2);
  margin: 0 auto;
}

.wide {
  margin-inline: calc(((100vw - 1400px + (var(--gap) / 2)) / 2) * -1);
  padding-inline: calc((100vw - 1400px + (var(--gap) / 2)) / 2);
}

.vertical-center {
  align-items: center;
}

.row {
  width: calc(100% + var(--gap));
}

.offset-left {
  padding-left: calc((100% - (1400px - var(--gap))) / 2);
  padding-right: 3rem;
}

.offset-right {
  padding-right: calc((100% - (1400px - var(--gap))) / 2);
  padding-left: 3rem;
}

@media screen and (max-width: 1400px) {
  .wide {
    margin-inline: calc((var(--gap) / 2) * -1);
    padding-inline: calc(var(--gap) / 2);
  }
  .offset-left {
    padding-left: calc(var(--gap) / 2);
  }

  .offset-right {
    padding-right: calc(var(--gap) / 2);
  }
}

.narrow {
  max-width: 56rem;
  margin: 0 auto;
}

.round {
  border-radius: 50%;
}

.row,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  clear: both;
}

.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);
}

.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);
}

/* === MANSORY === */

.mansory-2,
.mansory-3,
.mansory-4,
.mansory-5,
.mansory-6 {
  -webkit-column-gap: var(--gap);
  -moz-column-gap: var(--gap);
  column-gap: var(--gap);
}

.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;
  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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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: var(--gap) / 2;
    padding-left: var(--gap) / 2;
  }

  .offset-right {
    padding-right: var(--gap) / 2;
    padding-left: var(--gap) / 2;
  }
}

@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;
  }
}