/*COLORS*/
:root {
  /* reds */
  --color-red1: #a93f55;
  --color-red2: #c57e8d;
  --color-red3: #401820;
  /* purples */
  --color-purple1: #873392;
  --color-purple2: #ab70b2;
  --color-purple3: #2e1132;
  /* blues */
  --color-blue1: #4d68db;
  --color-blue2: #1a1f68;
  /* greens */
  --color-green1: #36c44e;
  --color-green2: #42685c;
  /* b&n */
  --color-white: #fafafa;
  --color-dark: #13090c;
  /* grays */
  --color-gray1: #c1bbbb;
  --color-gray2: #847d7d;
  --color-gray2b: #474444;
  --color-gray3: #332e2f;
}

/* spacing */
:root {
  --spacing-none: 0;
  --spacing-5: calc(5 / 16 * 1rem);
  --spacing-10: calc(10 / 16 * 1rem);
  --spacing-15: calc(15 / 16 * 1rem);
  --spacing-20: calc(20 / 16 * 1rem);
  --spacing-25: calc(25 / 16 * 1rem);
  --spacing-30: calc(30 / 16 * 1rem);
  --spacing-35: calc(35 / 16 * 1rem);
  --spacing-40: calc(40 / 16 * 1rem);
  --spacing-50: calc(50 / 16 * 1rem);
  --spacing-60: calc(60 / 16 * 1rem);
  --spacing-75: calc(75 / 16 * 1rem);
  --spacing-90: calc(90 / 16 * 1rem);
  --spacing-100: calc(100 / 16 * 1rem);
  --spacing-125: calc(125 / 16 * 1rem);
  --spacing-150: calc(150 / 16 * 1rem);
  --spacing-200: calc(200 / 16 * 1rem);
  --spacing-255: calc(255 / 16 * 1rem);
}

/* fonts */
:root {
  --font-decorative: "Yeseva One", cursive, serif;
  --font-read: "Lato", "Arial", sans-serif;
  --fontsize-5: calc(5 / 16 * 1rem);
  --fontsize-7: calc(7 / 16 * 1rem);
  --fontsize-8: calc(8 / 16 * 1rem);
  --fontsize-10: calc(10 / 16 * 1rem);
  --fontsize-12: calc(12 / 16 * 1rem);
  --fontsize-16: calc(16 / 16 * 1rem);
  --fontsize-18: calc(18 / 16 * 1rem);
  --fontsize-24: calc(24 / 16 * 1rem);
  --fontsize-27: calc(27 / 16 * 1rem);
  --fontsize-36: calc(36 / 16 * 1rem);
  --fontsize-40: calc(40 / 16 * 1rem);
  --fontsize-54: calc(54 / 16 * 1rem);
  --fontsize-61: calc(61 / 16 * 1rem);
  --fontsize-81: calc(81 / 16 * 1rem);
  --fontsize-91: calc(91 / 16 * 1rem);
  --fontsize-121: calc(121 / 16 * 1rem);
  --fontsize-136: calc(136 / 16 * 1rem);
  --fonsize-182: calc(182 / 16 * 1rem);
  --fonsize-205: calc(205 / 16 * 1rem);
  --fontsize-273: calc(273 / 16 * 1rem);
  --fontsize-308: calc(308 / 16 * 1rem);
}

*,
*::before,
*::after {
  margin-top: 0;
}

html {
  font-weight: 400;
  font-size: 100%;
  line-height: var(--spacing-25);
  font-family: var(--font-read);
  background-color: var(--color-red1);
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: top -6800px left -3152px;
  background-size: 8000px;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  body {
    background-position: top -6210px left -2800px;
    background-size: 7100px;
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  body {
    background-position: top -6600px left -2841px;
    background-size: 7500px;
  }
}

.wrapper {
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
span,
li,
ul,
li,
img {
  padding: 0;
  margin: 0;
}
ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  padding: 0;
  margin: 0;
  transition: all 0.01s;
}

/*=== CONTAINERS AND PAGE SECTIONS ===*/
.l-container {
  max-width: calc(1300 / 16 * 1rem);
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
  margin: 0 auto;
}

.c-pagesection {
  padding-bottom: var(--spacing-75);
}

.c-contentsection {
  padding-bottom: var(--spacing-30);
}

.c-contentsection > iframe {
  width: 100%;
}

.c-separator {
  height: 1px;
  width: 100%;
  background-color: var(--color-gray1);
  margin-top: var(--spacing-125);
}

.c-vertical-separator {
  display: flex;
  margin: 0 auto;
  width: 2px;
  height: 100%;
  background-color: var(--color-gray1);
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-separator {
    margin-top: var(--spacing-150);
  }

  .c-pagesection {
    padding-bottom: var(--spacing-100);
  }

  .c-contentsection {
    padding-bottom: var(--spacing-40);
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-pagesection {
    padding-bottom: var(--spacing-150);
  }

  .c-separator {
    height: 1px;
    width: 100%;
    background-color: var(--color-gray2);
    margin-top: var(--spacing-200);
  }

  .c-contentsection {
    padding-bottom: var(--spacing-60);
  }
}

.c-content--image:hover > .o-download__container {
  opacity: 100%;
}

/*=== IMAGES ===*/
.o-fluidimage {
  display: block;
  max-width: 100%;
  height: auto;
}

.o-video > iframe {
  width: 100%;
  height: var(--spacing-255);
}

.o-download__container {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  margin: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  background-color: var(--color-gray2b);
  border-radius: 100%;
  opacity: 0%;
  transition: opacity 0.2s ease-out;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .o-video > iframe {
    height: 400px;
  }
}
@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .o-video > iframe {
    height: 550px;
  }
}

.o-button__regular {
  display: inline-block;
  margin-right: var(--spacing-10);
  padding: var(--spacing-10);
  background-color: var(--color-purple1);
  color: var(--color-white);
  transition: all 0.2s ease-out;
}

.o-button__regular:hover {
  background-color: var(--color-purple3);
  border-bottom-left-radius: var(--spacing-20);
}

.o-simplelink:hover {
  text-decoration: underline;
}

/*=== NAVIGATION ===*/
nav {
  font-size: var(--fontsize-16);
}

header > nav {
  padding-top: var(--spacing-75);
  padding-bottom: var(--spacing-150);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-30);
}

footer {
  background-repeat: no-repeat;
  background-image: url(/assets/png/footerlem-big.png),
    url(/assets/svg/circle.svg);
  background-size: cover, 7000px;
  background-position: bottom -140px center, top 60px right 41%;

  padding-bottom: var(--spacing-35);
  padding-top: var(--spacing-125);
}

.c-mainnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1/3;
  gap: var(--spacing-20);
}

.c-footernav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-25);
  padding-bottom: var(--spacing-75);
  padding-top: var(--spacing-125);
}

.c-explorenav {
  grid-row-gap: var(--spacing-20);
}

.c-socialnav {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--spacing-10);
  justify-content: center;
  padding-bottom: var(--spacing-20);
}

.c-mailnav {
  padding-bottom: var(--spacing-20);
  display: flex;
  justify-content: center;
}

.c-footer__end {
  display: flex;
  justify-content: center;
}

.c-mainnav__button {
  grid-column: 1/3;
  display: inline-block;
  background-color: var(--color-purple1);

  align-self: center;
  height: auto;
  width: auto;
  transition: all 0.2s;
}

.c-mainnav__button > a {
  display: flex;
  width: 100%;

  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;

  border-top: 50px;
  border-bottom: 50px;

  color: var(--color-white);
  font-weight: 700;
}

.c-mainnav__button > a > p {
  padding: var(--spacing-15);
}

.c-mainnav__button:hover {
  border-bottom-left-radius: 25px;
  background-color: var(--color-purple3);
}

.c-mainnav__button--is-current {
  border-bottom-left-radius: 25px;
  background-color: var(--color-purple3);
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-mainnav {
    flex-direction: row;
    justify-content: space-between;
    gap: 70px;
  }

  .c-footernav {
    padding-bottom: 0;
    gap: var(--spacing-50);
    align-items: flex-start;
  }

  .c-footernav__button {
    align-self: start;
  }

  .c-socialnav {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-bottom: var(--spacing-10);
  }

  .c-mailnav {
    justify-content: flex-end;
  }

  .c-footer__end {
    justify-content: flex-end;
  }

  .c-footer__contact {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
  }

  header > nav {
    flex-direction: row;
    padding-top: var(--spacing-50);
    padding-bottom: var(--spacing-125);
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-mainnav {
    grid-column: 2 / 8;
  }

  .c-mainnav__button {
    grid-column: 12/13;
  }

  .c-footernav {
    gap: var(--spacing-50);
    padding-top: var(--spacing-50);
  }

  .c-footer__contact {
    display: grid;
    height: auto;
    align-self: end;
    grid-template-columns: 1fr 1fr;
  }

  .c-mailnav {
    padding-bottom: 1px;
    justify-content: center;
    grid-column: 1/2;
  }

  .c-socialnav {
    grid-column: 2/3;
    padding-bottom: 0;
  }

  .c-footer__end {
    grid-column: 2/3;
  }

  header > nav {
    padding-top: var(--spacing-35);
    padding-bottom: var(--spacing-90);
  }

  footer {
    background-size: contain, 7000px;
  }
}

.c-mainnav__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-explorenav__link {
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
  transition: all 0.2s ease-out;
  font-weight: 700;
  transform: rotate(-3deg);
}

.c-explorenav__link:hover > .c-explorenav__item {
  background-color: var(--color-blue2);
}

.c-explorenav__link:hover > .c-explorenav__item::before {
  transform: scale(1.1);
}

.c-explorenav__item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(300 / 16 * 1rem);
  transition: transform 0.5s ease-out, border-radius 0.2s ease-in-out,
    background-color 0.2s ease-in-out, background-size 0.5s ease-out;
  position: relative;
  overflow: hidden;
  border-top-right-radius: var(--spacing-150);

  background: var(--url);
  background-color: var(--color-blue1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.c-explorenav__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-blend-mode: multiply;
  background: inherit;
  transition: inherit;
  overflow: hidden;
}

.c-explorenav__item > p {
  position: relative;
  text-align: center;
  transform: rotate(3deg);
}

.c-mainnav__link {
  padding-bottom: var(--spacing-15);
  text-decoration: none;
  color: var(--color-gray2);
  font-weight: 700;
}

.c-mainnav__link:hover {
  color: var(--color-dark);
}

.c-footernav__link {
  padding-bottom: var(--spacing-15);
  color: var(--color-gray1);
  font-weight: 700;
  text-decoration: none;
}

.c-footernav__link:hover {
  color: var(--color-white);
}

.c-mainnav__link.is-current {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  color: var(--color-dark);
}

.c-footernav__link.is-current {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  color: var(--color-white);
}

.c-mainnav__link.is-current.is-selected1 {
  background-image: url("/assets/svg/underline/und1.svg");
}

.c-mainnav__link.is-current.is-selected2 {
  background-image: url("/assets/svg/underline/und2.svg");
}

.c-mainnav__link.is-current.is-selected3 {
  background-image: url("/assets/svg/underline/und3.svg");
}

.c-footernav__link.is-current.is-selected1 {
  background-image: url("/assets/svg/underline/alt/und1.svg");
}

.c-footernav__link.is-current.is-selected2 {
  background-image: url("/assets/svg/underline/alt/und2.svg");
}

.c-footernav__link.is-current.is-selected3 {
  background-image: url("/assets/svg/underline/alt/und3.svg");
}

.c-socialicon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: var(--color-gray3);
  mask: var(--socialmask);
  -webkit-mask: var(--socialmask);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: all 0.2s;
}

.c-socialicon:hover {
  background-color: var(--color-white);
}

.c-mailnav__link:hover {
  text-decoration: underline;
}

/*=== BANNER ===*/

.c-banner__image {
  grid-column: 1/3;
  display: block;
  width: 100%;
  height: 500px;
}

.c-banner__text {
  display: block;
  grid-column: 1/3;
  padding-top: var(--spacing-40);
}

.c-banner > .c-separator {
  grid-column: 1/3;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-banner__image {
    height: 540px;
    grid-column: 5/7;
  }

  .c-banner__text {
    grid-column: 1/5;
    padding-top: var(--spacing-50);
    padding-bottom: var(--spacing-125);
  }

  .c-banner > .c-separator {
    grid-column: 1/7;
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-banner__image {
    height: 600px;
    grid-column: 8/13;
  }

  .c-banner__text {
    grid-column: 2/8;
    padding-top: var(--spacing-75);
    padding-bottom: var(--spacing-125);
  }

  .c-banner > .c-separator {
    grid-column: 1/13;
  }
}

/* === PREZ BLOCKS === */

.c-big-prez__block {
  position: relative;
  padding-bottom: var(--spacing-75);
  margin-bottom: var(--spacing-75);
}

.c-big-prez__article {
  z-index: 10;
  position: relative;
}

.c-big-prez__image {
  position: absolute;
  bottom: 0;
  height: 400px;
  z-index: 0;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-big-prez__block {
    padding-bottom: var(--spacing-90);
    margin-bottom: var(--spacing-90);
  }
  .c-big-prez__image {
    height: 500px;
    transform: translate(0, 0);
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-big-prez__block {
    padding-bottom: var(--spacing-100);
    margin-bottom: var(--spacing-100);
  }
  .c-big-prez__image {
    height: 650px;
    transform: translate(0, 0);
  }
}

/* === CARDS === */

.c-identity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-5);
  padding-bottom: var(--spacing-35);
}

.c-identity-card > img {
  padding-bottom: var(--spacing-10);
}

.c-play-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: var(--spacing-5);
}

.c-play-card > h5 {
  padding-bottom: var(--spacing-5);
  font-weight: 1000;
}

.c-play-card > .c-play-card__image {
  margin-bottom: var(--spacing-25);
}

.c-play-card__image {
  position: relative;
}

.c-play-card__image > img {
  border-radius: var(--spacing-10);
  transition: 0.2s all ease-out;
  width: 100%;
}

.c-play-card__highlight::before {
  opacity: 0;
}

.c-play-card__highlight {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  border-radius: var(--spacing-10);
  opacity: 0;
  transition: all 0.2s ease-out;
}

.c-play-card__highlight > p {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease-out;
}

.c-play-card__image {
  transition: all 0.2s ease-out;
}

.c-plays-list__item:nth-child(3n + 1) > a > .c-play-card > .c-play-card__image {
  transform: rotate(3deg);
}

.c-plays-list__item:nth-child(4n) > a > .c-play-card > .c-play-card__image {
  transform: rotate(-3deg);
}

.c-play-card > h4 {
  padding-bottom: var(--spacing-10);
}

.c-play-card > p {
  color: var(--color-purple1);
}

.c-play-card:hover > .c-play-card__image > .c-play-card__highlight {
  border-radius: var(--spacing-20);
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  opacity: 1;
}

.c-play-card:hover > p {
  text-decoration: underline;
}

.c-play-card:hover > .c-text--green {
  color: var(--color-blue1);
  transition: 0.1s color ease-out;
}

.c-play-card:hover > .c-play-card__image {
  rotate: -3deg;
}

.c-play-card:hover > .c-play-card__image > img {
  border-radius: var(--spacing-20);
}

.c-play-card:hover > .c-play-card__image > .c-play-card__highlight > p {
  top: 0;
}

.c-plays__filtersnav {
  display: flex;
  flex-direction: row;
  padding-bottom: var(--spacing-25);
  gap: var(--spacing-10);
}

@media all and (min-width: calc(750/16*1rem)) {
  .c-plays__filtersnav {
    padding-bottom: var(--spacing-40);
  }
}

@media all and (min-width: calc(1050/16*1rem)) {
  .c-plays__filtersnav {
    padding-bottom: var(--spacing-60);
  }
}

.c-plays__filtersnav__item {
  display: inline-block;
}

.c-plays__filtersnav__link {
  padding: var(--spacing-15);
  background-color: var(--color-purple1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-5);
  color: var(--color-white);
  transition: all 0.2s ease-out;
}

.c-plays__filtersnav__link:hover,
.filter-is-current {
  background-color: var(--color-purple3);
  border-bottom-left-radius: var(--spacing-15);
}

.c-plays__filtersnav__link > img {
  height: 25px;
  display: block;
}

.c-plays__filtersnav__link > p {
  display: none;
}

@media all and (min-width: calc(750/16*1rem)) {
  .c-plays__filtersnav__link > p {
    display: block;
  }
}

.c-event-card {
  position: relative;
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.c-event-card__text {
  max-width: calc(1000 / 16 * 1rem);
}

.c-event-card__image {
  margin-bottom: var(--spacing-15);
  margin-top: var(--spacing-15);

  transition: all 0.2s ease-out;
  position: relative;
}

.c-event-card__text > p {
  padding-bottom: var(--spacing-5);
}

.c-event-card__image > img {
  width: 100%;
  border-radius: var(--spacing-10);
  transition: all 0.2s ease-out;
}

.c-event-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
}

.c-event-list__item:nth-child(2n) > .c-event-card > .c-event-card__image {
  transform: rotate(3deg);
}

.c-event-list__item:nth-child(3n) > .c-event-card > .c-event-card__image {
  transform: rotate(-3deg);
}

.c-event-card__text > h5 > strong:hover {
  text-decoration: underline;
}

.c-event-card:hover > .c-event-card__image {
  transform: rotate(-3deg);
}

.c-event-card > .c-event-card__text > h2 {
  transition: color 0.2s ease-out;
}

.c-event-card__image:hover > .c-play-card__highlight {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  opacity: 1;
}

.c-event-card__image:hover > .c-play-card__highlight > p {
  top: 0;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-event-card {
    justify-content: space-between;
    align-items: center;
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-event-card {
    gap: var(--spacing-75);
  }
}

.c-date-card {
  display: block;
  width: 100%;
}

.c-date-list__item:nth-child(4n-2) > .c-date-card {
  transform: rotate(-3deg);
}

.c-date-list__item:nth-child(3n-2) > .c-date-card {
  transform: rotate(3deg);
}

.c-date-card > a {
  display: block;
  background-color: var(--color-gray2);
  padding: var(--spacing-20);
  border-radius: var(--spacing-15);
  transition: all 0.2s ease-out;
}

.c-date-card:hover > a {
  background-color: var(--color-blue1);
  border-radius: var(--spacing-25);
  rotate: 3deg;
}

.c-date-card:hover > a > h2 {
  text-decoration: underline;
}

.c-file--card {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-15);
  margin-bottom: var(--spacing-20);
  background-color: var(--color-blue1);
  border-radius: var(--spacing-10);
  padding: var(--spacing-10);
}

.c-file--card__link {
  display: block;
  text-decoration: underline;
  color: var(--color-white);
}

.c-file--card__link:hover {
  text-decoration: none;
}

.c-file--card__download {
  height: var(--spacing-30);
  width: var(--spacing-30);
  background-color: var(--color-gray1);
  mask-image: url(/assets/svg/download.svg);
  mask-repeat: no-repeat;
  mask-size: 100%;
  mask-position: center;
}

.c-file--card__download:hover {
  background-color: var(--color-white);
  transition: background-color 0.1s ease-out;
}

.c-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
  justify-content: space-between;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-contact-list {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

.c-contact-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-15);
}

.c-contact-card > a > img {
  opacity: 0.5;
  transition: 0.2s opacity ease-out;
}

.c-contact-card:hover > a > img {
  opacity: 1;
}

.c-contact-card:hover > a > h2 {
  color: var(--color-blue1);
}

.c-contact-card:hover > a > h3 {
  text-decoration: underline;
}

/*=== GRIDS FRAMEWORK ===*/

.l-grid--1cols {
  display: grid;
  grid-row-gap: var(--spacing-20);
}

.l-grid--2cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: var(--spacing-20);
}

.l-grid-item__2c {
  grid-column: span 2;
}

.l-contentgrid {
  grid-row-gap: var(--spacing-50);
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .l-grid--6cols\@medium {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: var(--spacing-20);
  }
  .l-grid--2cols\@medium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--spacing-20);
  }
  .l-grid-item__1-3\@medium {
    grid-column: 1/3;
  }
  .l-grid-item__3-7\@medium {
    grid-column: 3/7;
  }
  .l-contentgrid {
    grid-row-gap: var(--spacing-75);
  }
  .l-grid-item__2c\@medium {
    grid-column: span 2;
  }
  .l-grid-item__3c\@medium {
    grid-column: span 3;
  }
  .l-grid-item__6c\@medium {
    grid-column: span 6;
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .l-grid--12cols\@large {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--spacing-20);
  }
  .l-grid--3cols\@large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
  }
  .l-grid-item__1-3\@large {
    grid-column: 1/3;
  }
  .l-grid-item__5-13\@large {
    grid-column: 5/13;
  }
  .l-grid-item__3-13\@large {
    grid-column: 3/13;
  }
  .l-grid-item__4-13\@large {
    grid-column: 5/13;
  }
  .l-contentgrid {
    grid-row-gap: var(--spacing-100);
  }
  .l-grid-item__3c\@large {
    grid-column: span 3;
  }
  .l-grid-item__4c\@large {
    grid-column: span 4;
  }
  .l-grid-item__6c\@large {
    grid-column: span 6;
  }
  .l-grid-item__7c\@large {
    grid-column: span 7;
  }
}

.l-grid__auto {
  display: grid;
  align-items: center;
  gap: var(--spacing-20);
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .l-grid__auto {
    grid-template-columns: repeat(var(--n), 1fr);
  }
}

sep {
  display: none;
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  sep {
    display: block;
  }
}

/* === FONT FRAMEWORK === */
.c-title {
  font-family: var(--font-decorative);
  font-weight: 300;
}

/* text color */
.c-text--black {
  color: var(--color-dark);
}

.c-text--white {
  color: var(--color-white);
}

.c-text--red {
  color: var(--color-red1);
}

.c-text--altred {
  color: var(--color-red2);
}

.c-text--green {
  color: var(--color-green1);
}

.c-text--altgreen {
  color: var(--color-green2);
}

.c-text--blue {
  color: var(--color-blue1);
}

.c-text--lightgray {
  color: var(--color-gray1);
}

.c-text--midgray {
  color: var(--color-gray2);
}

.c-text--deepgray {
  color: var(--color-gray2b);
}

.c-text--darkgray {
  color: var(--color-gray3);
}

.c-text--purple {
  color: var(--color-purple1);
}

.c-text--deg {
  vertical-align: top;
}

.c-title__page {
  font-size: var(--fontsize-61);
  line-height: var(--spacing-75);
  padding-bottom: var(--spacing-30);
}

.c-subtitle__page {
  font-size: var(--fontsize-27);
  padding-bottom: var(--spacing-40);
  line-height: var(--spacing-30);
}

.c-title__section {
  font-size: var(--fontsize-36);
  line-height: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}

.c-title__mini {
  font-size: var(--fontsize-18);
  padding-bottom: var(--spacing-20);
}

.c-title__small {
  font-size: var(--fontsize-24);
  padding-bottom: var(--spacing-25);
}

.c-title__medium {
  font-size: var(--fontsize-27);
  line-height: var(--spacing-30);
  padding-bottom: var(--spacing-30);
}

.c-text__huge {
  font-size: var(--fontsize-54);
  line-height: var(--spacing-60);
  padding-bottom: var(--spacing-75);
  text-align: left;
  overflow-wrap: anywhere;
}

.c-text__big {
  font-size: var(--fontsize-27);
  line-height: var(--spacing-30);
}

.c-text__regular {
  font-size: var(--fontsize-24);
  line-height: var(--spacing-30);
}

.c-text__medium {
  font-size: var(--fontsize-18);
  line-height: var(--spacing-30);
}

.c-text__small {
  font-size: var(--fontsize-12);
}

.c-columntext--3cols {
  column-count: 1;
}

@media all and (min-width: calc(750 / 16 * 1rem)) {
  .c-title__page {
    font-size: var(--fontsize-91);
    line-height: var(--spacing-125);
    padding-bottom: var(--spacing-40);
  }

  .c-title__toobig {
    font-size: var(--fontsize-81);
    line-height: var(--spacing-90);
  }

  .c-title__medium {
    font-size: var(--fontsize-36);
    line-height: var(--spacing-40);
    padding-bottom: var(--spacing-25);
  }

  .c-title__small {
    font-size: var(--fontsize-27);
    line-height: var(--spacing-30);
    padding-bottom: var(--spacing-15);
  }

  .c-subtitle__page {
    font-size: var(--fontsize-36);
    line-height: var(--spacing-40);
    padding-bottom: var(--spacing-50);
  }

  .c-title__section {
    font-size: var(--fontsize-40);
    line-height: var(--spacing-50);
    padding-bottom: var(--spacing-50);
  }

  .c-text__huge {
    font-size: var(--fontsize-61);
    line-height: var(--spacing-75);
    padding-bottom: var(--spacing-100);
  }

  .c-text__big {
    font-size: var(--fontsize-36);
    line-height: var(--fontsize-40);
  }

  .c-text--deg {
    font-size: var(--fontsize-81);
  }

  .c-columntext--3cols {
    column-count: 2;
    column-gap: var(--spacing-40);
  }

  .c-columntext--2cols {
    column-count: 2;
    column-gap: var(--spacing-40);
  }
}

@media all and (min-width: calc(1050 / 16 * 1rem)) {
  .c-title__page {
    font-size: var(--fontsize-121);
    line-height: var(--spacing-125);
    padding-bottom: var(--spacing-50);
  }

  .c-title__toobig {
    font-size: var(--fontsize-91);
    line-height: var(--spacing-100);
  }

  .c-title__medium {
    font-size: var(--fontsize-36);
    padding-bottom: var(--spacing-30);
  }

  .c-subtitle__page {
    font-size: var(--fontsize-40);
    line-height: var(--spacing-50);
    padding-bottom: var(--spacing-75);
  }

  .c-title__section {
    font-size: var(--fontsize-40);
    line-height: var(--spacing-50);
    padding-bottom: var(--spacing-75);
  }

  .c-text__huge {
    font-size: var(--fontsize-81);
    line-height: var(--spacing-100);
    padding-bottom: var(--spacing-125);
    text-align: right;
  }

  .c-text__big {
    font-size: var(--fontsize-40);
    line-height: var(--spacing-50);
  }

  .c-columntext--3cols {
    column-count: 3;
    column-gap: var(--spacing-50);
  }

  .c-columntext--2cols {
    column-count: 2;
    column-gap: var(--spacing-50);
  }
}