:root {
  --wdth-max-album: 5.933;
  --wdth-min-album: 2;
  --wdth-max-logo: 3.736;
  --wdth-min-logo: 1.1;
  --wght: 900;
  --font-size-a: 3.1vw;
  --font-size-l: 13vw;
  --datesize: 1.05;
}

@media only screen and (max-width: 768px) {
  :root {
    --font-size-l: 100vw;
    --font-size-a: 2rem;
    --datesize: 1.5;
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.padding {
  padding-right: 0.1em;
}

.logo-word-1 span,
.logo-word-2 span,
.logo-word-3 span {
  font-size: 20vh;
  transform: scale(1, 1.1);
  -webkit-transform: scale(1, 1.1);
  -moz-transform: scale(1, 1.1);
  -o-transform: scale(1, 1.1);
}

@media only screen and (min-height: 900px) and (max-height: 1000px) and (min-width: 900px) and (max-width: 1000px) {

  .logo-word-1 span,
  .logo-word-2 span,
  .logo-word-3 span {
    font-size: 17vh;
  }
}

@media only screen and (max-width: 768px) {
  .padding {
    padding-right: 0;
  }

  .logo-word-1 span,
  .logo-word-2 span,
  .logo-word-3 span {
    font-size: 9vh;
  }
}

h6 {
  font-size: var(--font-size-l);
  line-height: calc(var(--font-size-a)*0.5);
  letter-spacing: 1px;
  font-variation-settings: 'wdth'var(--wdth-min-logo);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* color:black; */

}

h9 {
  font-size: var(--font-size-l);
  line-height: calc(var(--font-size-a)*0.5);
  letter-spacing: 1px;
  font-variation-settings: 'wdth'var(--wdth-min-logo);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* color:black; */

}

h10 {
  font-size: var(--font-size-l);
  line-height: calc(var(--font-size-a)*0.5);
  letter-spacing: 1px;
  font-variation-settings: 'wdth'var(--wdth-min-logo);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* color:black; */

}

img.one {
  width: 30vw;
  max-width: 100%;
  height: auto !important;
}

img.two {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 4.9vw;
}

@media only screen and (max-width: 768px) {
  img.one {
    width: auto;
    max-width: 75%;
    height: auto !important;
    max-height: 5vh;
  }

  img.two {
    width: auto;
    max-width: 100%;
    height: auto !important;
    max-height: 5vh;
  }
}

h6 .char {
  /* --delay: calc((var(--char-index) + 1) * 666ms); */
  -webkit-transition: font-variation-settings 10s ease;
  -o-transition: font-variation-settings 10s ease;
  transition: font-variation-settings 10s ease;
  -webkit-animation-name: breathe;
  animation-name: breathe;
  -webkit-animation-duration: 3.8s;
  animation-duration: 3.8s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  /* -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay); */
  top: 0;
  font-variation-settings: var(--extra);
  left: 0;
}

h6:hover span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}


h9 .char {
  --delay: calc((var(--char-index) + 1) * 370ms);
  -webkit-transition: font-variation-settings 10s ease;
  -o-transition: font-variation-settings 10s ease;
  transition: font-variation-settings 10s ease;
  -webkit-animation-name: breathe;
  animation-name: breathe;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay);
  top: 0;
  font-variation-settings: var(--extra);
  left: 0;
}

h9:hover span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

h10 .char {
  --delay: calc((var(--char-index) + 1) * 320ms);
  -webkit-transition: font-variation-settings 10s ease;
  -o-transition: font-variation-settings 10s ease;
  transition: font-variation-settings 10s ease;
  -webkit-animation-name: breathe;
  animation-name: breathe;
  -webkit-animation-duration: 2.87s;
  animation-duration: 2.87s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay);
  top: 0;
  font-variation-settings: var(--extra);
  left: 0;
}

h10:hover span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}


@-webkit-keyframes breathe {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  35% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }
}

@keyframes breathe {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  35% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }
}

@-webkit-keyframes breathefast {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  35% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }
}

@keyframes breathefast {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  35% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }
}

.proje {
  margin-top: 0;
}

@media only screen and (max-width: 900px) {
  .proje {
    margin-top: calc(var(--font-size-s)*9)
  }
}


.bodytext {
  position: absolute;
  right: calc(var(--margin)/4);
  font-size: 1.8rem;
  line-height: 2rem;
  bottom: calc(var(--font-size-xs)*2.4);
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  line-height: calc(var(--font-size-xs)*1.2) !important;
}

@media only screen and (min-width: 1500px) {
  .bodytext {
    bottom: calc(var(--font-size-xs)*3.6);
  }
}

@media only screen and (min-height: 900px) and (max-height: 1000px) and (min-width: 800px) and (max-width: 1000px) {
  .bodytext {
    bottom: calc(var(--font-size-xs)*4.8);
  }
}

@media only screen and (max-width: 900px) {
  .bodytext {
    right: 0 !important;
    width: 100vw;
    top: calc(100vh + var(--font-size-s));
    padding: 0 calc(var(--font-size-s));
  }
}


h7 {
  font-size: calc(var(--font-size-a)*var(--datesize));
  line-height: var(--font-size-a);
  letter-spacing: 1px;
  font-variation-settings: 'wdth'var(--wdth-min-logo);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* color:black; */
}

h7 .char {
  --delay: calc((var(--char-index) + 0) * 400ms);
  -webkit-transition: font-variation-settings 10s ease;
  -o-transition: font-variation-settings 10s ease;
  transition: font-variation-settings 10s ease;
  -webkit-animation-name: breathe-stop;
  animation-name: breathe-stop;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay);
  font-variation-settings: var(--extra);
  top: 0;
  left: 0;
}

h7:hover span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

h7 small {
  font-variation-settings: "wght"900, "wdth"0.5;
}

@media only screen and (max-width: 900px) {
  h7 small {
    font-variation-settings: "wght"900, "wdth"1.3;
  }
}

h7 span:nth-child(1) {
  font-variation-settings: "wght"900, "wdth"1.4;
}

h7 span:nth-child(2) {
  font-variation-settings: "wght"900, "wdth"2;
}

h7 span:nth-child(3) {
  font-variation-settings: "wght"900, "wdth"2.2;
}

h7 span:nth-child(4) {
  font-variation-settings: "wght"900, "wdth"4.7;
}

h7 span:nth-child(5) {
  font-variation-settings: "wght"900, "wdth"6;
}

h7 span:nth-child(6) {
  font-variation-settings: "wght"900, "wdth"6;
}

h7 span:nth-child(7) {
  font-variation-settings: "wght"900, "wdth"3;
}

h7 span:nth-child(8) {
  font-variation-settings: "wght"900, "wdth"2;
}

h7 span:nth-child(9) {
  font-variation-settings: "wght"900, "wdth"1.85;
}

h7 span:nth-child(10) {
  font-variation-settings: "wght"900, "wdth"1.4;
}

h7 span:nth-child(11) {
  font-variation-settings: "wght"900, "wdth"1.4;
}

h7 span:nth-child(12) {
  font-variation-settings: "wght"900, "wdth"1.2;
}

@-webkit-keyframes breathe-stop {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }
}

@keyframes breathe-stop {
  0% {
    font-variation-settings: 'wdth'var(--wdth-min-logo);
  }

  100% {
    font-variation-settings: 'wdth'var(--wdth-max-logo);
  }
}

h8 {
  font-size: var(--font-size-a);
  line-height: var(--font-size-a);
  letter-spacing: 1px;
  font-variation-settings: 'wdth'var(--wdth-min-logo);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* color:black; */
}

h8 .char {
  --delay: calc((var(--char-index) + 1) * 400ms);
  -webkit-transition: font-variation-settings 10s ease;
  -o-transition: font-variation-settings 10s ease;
  transition: font-variation-settings 10s ease;
  -webkit-animation-name: breathe;
  animation-name: breathe;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay);
  font-variation-settings: var(--extra);
  top: 0;
  left: 0;
}

h8:hover span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}


h8 span:nth-child(1) {
  font-variation-settings: "wght"900, "wdth"2.49;
}

h8 span:nth-child(2) {
  font-variation-settings: "wght"900, "wdth"3;
}

h8 span:nth-child(3) {
  font-variation-settings: "wght"900, "wdth"3.936;
}

h8 span:nth-child(4) {
  font-variation-settings: "wght"900, "wdth"3;
}

h8 span:nth-child(5) {
  font-variation-settings: "wght"900, "wdth"2.49;
}

h8 span:nth-child(6) {
  font-variation-settings: "wght"900, "wdth"2;
}

h8 span:nth-child(7) {
  font-variation-settings: "wght"900, "wdth"1.752;
}

h8 span:nth-child(8) {
  font-variation-settings: "wght"900, "wdth"1.46;
}

h8 span:nth-child(9) {
  font-variation-settings: "wght"900, "wdth"1.167;
}

h8 span:nth-child(10) {
  font-variation-settings: "wght"900, "wdth"1;
}

h8 span:nth-child(11) {
  font-variation-settings: "wght"900, "wdth"1.167;
}

h8 span:nth-child(12) {
  font-variation-settings: "wght"900, "wdth"1.46;
}

h8 span:nth-child(13) {
  font-variation-settings: "wght"900, "wdth"1.752;
}

h8 span:nth-child(14) {
  font-variation-settings: "wght"900, "wdth"2;
}

h8 span:nth-child(15) {
  font-variation-settings: "wght"900, "wdth"2.49;
}

h8 span:nth-child(16) {
  font-variation-settings: "wght"900, "wdth"3;
}

h8 span:nth-child(17) {
  font-variation-settings: "wght"900, "wdth"3.936;
}

h8 span:nth-child(18) {
  font-variation-settings: "wght"900, "wdth"3;
}

h8 span:nth-child(19) {
  font-variation-settings: "wght"900, "wdth"2.49;
}

h8 span:nth-child(20) {
  font-variation-settings: "wght"900, "wdth"2;
}

h8 span:nth-child(21) {
  font-variation-settings: "wght"900, "wdth"1.752;
}

h8 span:nth-child(22) {
  font-variation-settings: "wght"900, "wdth"1.46;
}

h8 span:nth-child(23) {
  font-variation-settings: "wght"900, "wdth"1.167;
}

h8 span:nth-child(24) {
  font-variation-settings: "wght"900, "wdth"1;
}

h8 span:nth-child(25) {
  font-variation-settings: "wght"900, "wdth"1.167;
}

h8 span:nth-child(26) {
  font-variation-settings: "wght"900, "wdth"1.46;
}

h8 span:nth-child(27) {
  font-variation-settings: "wght"900, "wdth"1.752;
}

h8 span:nth-child(28) {
  font-variation-settings: "wght"900, "wdth"2;
}

h8 span:nth-child(29) {
  font-variation-settings: "wght"900, "wdth"2.49;
}

h8 span:nth-child(30) {
  font-variation-settings: "wght"900, "wdth"3;
}

h8 span:nth-child(31) {
  font-variation-settings: "wght"900, "wdth"3.936;
}

h8 span:nth-child(32) {
  font-variation-settings: "wght"900, "wdth"3;
}




/* justify text date */
h7.subtitles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
  -ms-flex-pack: right;
  justify-content: right;
  top: calc(var(--margin)*1.3);
  position: absolute;
  right: calc(var(--font-size-s)*1.3);
  letter-spacing: 2px;
  max-width: 100vw;
}

h8.subtitles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
  -ms-flex-pack: right;
  justify-content: right;
  bottom: calc(var(--font-size-s)*1.3);
  position: absolute;
  left: 0;
  letter-spacing: 2px;
  max-width: 100vw;
  word-spacing: inherit;
}

@media only screen and (min-width: 1300px) {

  h7.subtitles {
    letter-spacing: 0 !important;
    word-spacing: 1px;
  }

}

@media only screen and (max-width: 900px) {
  h7.subtitles {
    top: 15vh;
    right: 3vw;
  }

  h8.subtitles {
    top: 38vh;
    max-width: 100vw;
    left: 0;
  }
}

h7.subtitles span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  font-size: 7vw;
  letter-spacing: 3px;
}

h7.subtitles small {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  font-size: 7vw;
  letter-spacing: 5px;
  padding-right: calc(var(--font-size-s)*0.2);
}

@media only screen and (min-width: 1300px) {
  h7.subtitles span {
    font-size: 7vw;
  }
}


@media only screen and (min-height: 900px) and (max-height: 1000px) and (min-width: 900px) and (max-width: 1000px) {
  h7.subtitles span {
    font-size: 8.5vw;
  }
}

@media only screen and (max-width: 900px) {
  h7.subtitles span {
    letter-spacing: 0.7px;
    font-size: 9.5vw;
  }

  h7.subtitles small {
    letter-spacing: 3px;
    font-size: 9.6vw;
  }
}

h8.subtitles span {
  font-size: 4.8vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  letter-spacing: 2.5px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

@media only screen and (max-width: 900px) {
  h8.subtitles span {
    letter-spacing: 1.2px;
  }
}

.subtitles div:nth-child(1) {
  width: calc(var(--font-size-a)*2.6 * var(--datesize));

}

.subtitles div:nth-child(2) {
  width: calc(var(--font-size-a)*2.2 * var(--datesize));

}

.subtitles div:nth-child(3) {
  width: calc(var(--font-size-a)*2.7 * var(--datesize));

}

/* justify text musik */
.logo-word-1 {
  top: 0;
  max-width: 100vw;
  left: 0;
  position: absolute;
  padding-left: 18vw;
  max-width: 100vw;
}

@media only screen and (min-width: 1300px) {
  .logo-word-1 {
    padding-left: 22vw;
  }
}

@media only screen and (min-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-1 {
    padding-left: 7vw;
  }
}

@media only screen and (max-width: 900px) {
  .logo-word-1 {
    max-width: 85vw;
    padding-left: 8vw;
  }
}

.logo-word-1 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.logo-word-1 div:nth-child(1) {
  width: calc(var(--font-size-l)*2.5);
}

@media only screen and (min-width: 1200px) {
  .logo-word-1 div:nth-child(1) {
    width: calc(var(--font-size-l)*2.2);
  }
}

@media only screen and (min-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-1 div:nth-child(1) {
    width: calc(var(--font-size-l)*3.3);
  }
}

@media only screen and (max-width: 900px) {
  .logo-word-1 div:nth-child(1) {
    width: calc(var(--font-size-l)*0.41);
  }
}

/* justify text installationen */
.logo-word-2 {
  top: 20vh;
  max-width: 100vw;
  left: 2vw;
  position: absolute;
  /* max-width: 100vw; */
  margin-left: 0;
}

@media only screen and (min-width: 1500px) {
  .logo-word-2 {
    left: 16vw;
  }
}

@media only screen and (max-height: 900px) and (min-width: 1300px) {
  .logo-word-2 {
    left: 19vw;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
  .logo-word-2 {
    left: 12vw;
    top: 19vh;
  }
}

@media only screen and (min-height: 900px) and (max-height: 1000px) and (min-width: 900px) and (max-width: 1000px) {
  .logo-word-2 {
    top: 14vh;
  }
}



@media only screen and (max-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-2 {
    left: 13vw;
  }
}

@media only screen and (max-width: 900px) {
  .logo-word-2 {
    max-width: 85vw;
    top: 10vh;
    margin-left: -2vw;

  }
}

.logo-word-2 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  letter-spacing: 10px;
}

.logo-word-2 div {
  width: calc(var(--font-size-l)*5);
}

@media only screen and (min-height: 900px) and (min-width: 1500px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*5.3);
  }
}

@media only screen and (max-height: 900px) and (min-width: 1300px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*4.5);
  }
}

@media only screen and (max-height: 900px) and (min-width: 1200px) and (max-width: 1300px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*5.56);
  }
}

@media only screen and (max-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*5.5);
  }
}

@media only screen and (min-height: 900px) and (min-width: 1200px) and (max-width: 1500px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*6);
  }
}

@media only screen and (min-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*7.2);
  }
}

@media only screen and (max-width: 900px) {
  .logo-word-2 div {
    width: calc(var(--font-size-l)*0.90);

  }

  .logo-word-2 span {
    letter-spacing: 0px !important;
  }
}



/* justify text nurnberg */
.logo-word-3 {
  top: 40vh;
  padding-right: 15vw;
  max-width: 100vw;
  max-width: 100vw;
  right: 0;
  position: absolute;

}



@media only screen and (min-height: 900px) and (min-width: 1300px) {
  .logo-word-3 {
    padding-right: 10vw;
    top: 39vh;
  }
}

@media only screen and (max-height: 900px) and (min-width: 1300px) {
  .logo-word-3 {
    padding-right: 25vw;
    top: 40vh;
  }
}

@media only screen and (min-height: 900px) and (min-width: 900px) and (max-width: 1300px) {
  .logo-word-3 {
    padding-right: 8vw;
  }
}

@media only screen and (max-height: 900px) and (min-width: 900px) and (max-width: 1200px) {
  .logo-word-3 {
    padding-right: 18vw;
  }
}


@media only screen and (max-width: 900px) {
  .logo-word-3 {
    max-width: 100vw;
    top: 20vh;
    padding-right: 0vw !important;
    right: 0vw;
  }
}

.logo-word-3 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.logo-word-3 div:nth-child(1) {
  width: calc(var(--font-size-l)*3.6);

}

@media only screen and (min-width: 1300px) {
  .logo-word-3 div:nth-child(1) {
    width: calc(var(--font-size-l)*3.2);
  }
}

@media only screen and (min-height: 900px) and (min-width: 900px) and (max-width: 1300px) {
  .logo-word-3 div:nth-child(1) {
    width: calc(var(--font-size-l)*4.6);
  }
}

@media only screen and (max-width: 900px) {
  .logo-word-3 div:nth-child(1) {
    width: calc(var(--font-size-l)*0.57);

  }
}

/* justify text festival */
.textSample {
  position: absolute;
  left: calc(var(--margin)/4);
  bottom: calc(var(--font-size-xs)*5.4) !important;
  width: 50vw;
}

@media only screen and (min-width: 1300px) {

  /* justify text festival */
  .textSample {
    bottom: calc(var(--font-size-xs)*4);
  }

}

@media only screen and (max-width: 900px) {
  .textSample {
    max-width: 85vw;
    width: 85vw;
    bottom: calc(var(--font-size-xs)*2) !important;
  }
}

.textSample span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.textSample div:nth-child(1) {
  width: calc(var(--font-size-a)*5.4);

}

.textSample div:nth-child(2) {
  width: calc(var(--font-size-a)*1.7);

}

.textSample div:nth-child(3) {
  width: calc(var(--font-size-a)*10.4);

}


.section {
  position: relative;
  width: 100vw;
  height: 75vh;
  margin: 0;
  /* display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr 1fr 1.2fr;
  grid-template-rows: 1fr 1fr 1fr 1.2fr; */
  margin-top: 25vh;
  margin-left: calc(var(--margin)/4);
}

@media only screen and (min-width: 1300px) {
  .section {
    height: 75vh;
    margin-top: 25vh;
  }
}

@media only screen and (min-height: 900px) and (max-height: 1000px) and (min-width: 900px) and (max-width: 1000px) {
  .section {
    margin-top: 30vh;
    height: 70vh;
  }

  h8.subtitles {
    bottom: calc(var(--font-size-xs)*10) !important;
  }
}

@media only screen and (max-width: 768px) {
  .section {
    position: relative;
    width: 100vw;
    height: 60vh;
    margin: 0;
    margin-left: calc(var(--font-size-s)*0.8);
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 0.4fr 0.4fr 0.6fr 1fr;
    grid-template-rows: 0.4fr 0.4fr 0.6fr 1fr;
    margin-top: 40vh;
  }
}