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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* @font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../webfonts/Lato-Thin.woff2") format('woff2'), url("../webfonts/Lato-Thin.eot") format('eot');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../webfonts/Lato-Light.woff2") format('woff2'), url("../webfonts/Lato-Light.eot") format('eot');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../webfonts/Lato-LightItalic.woff2") format('woff2'), url("../webfonts/Lato-LightItalic.eot") format('eot');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../webfonts/Lato-Regular.woff2") format('woff2'), url("../webfonts/Lato-Regular.eot") format('eot');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../webfonts/Lato-Heavy.woff2") format('woff2'), url("../webfonts/Lato-Heavy.eot") format('eot');
} */
a:link,
a:visited {
  color: hsl(76, 80%, 50%);
  transition: 0.2s ease;
}

a:focus {
  color: hsl(0, 0%, 100%);
  transition: 0.2s ease;
}

a:hover {
  color: hsl(0, 0%, 100%);
  transition: 0.2s ease;
}

a:active {
  color: hsl(0, 0%, 100%);
  transition: 0.2s ease;
}

@media only screen and (min-width: 768px) {
  .primary-navigation {
    background-image: url(../img/navigation.webp);
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    /* aspect-ratio: 1.93531; */
    background-image: url(../img/textbox-bg.webp);
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -1.1rem;
    background-image: url(../img/textbox-deco.webp);
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -1.1rem;
    transform: scaleY(-1);
    background-image: url(../img/textbox-deco.webp);
  }
  .section-1 {
    background-image: url(../img/intro.jpg);
  }
  .meadow {
    background-image: url(../img/meadow.webp);
  }
  .stonewall {
    background-image: url(../img/stonewall.webp);
  }
  .city {
    background-image: url(../img/city.webp);
  }
  .graveyard {
    background-image: url(../img/graveyard.webp);
  }
  .section-3 {
    background-image: url(../img/cellar.jpg);
  }
  .forest {
    background-image: url(../img/forest.webp);
  }
  .grid-wrapper {
    background-image: url(../img/bg1.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  p {
    font-size: 1rem;
    line-height: 1.1rem;
  }
  .primary-navigation {
    height: min(100vh, 550px);
    font-size: min(2.54vh, 14.3px);
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    width: 27rem;
    padding: 2rem 2.2rem;
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -0.7rem;
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -0.8rem;
  }
  .birds {
    top: 4%;
    right: -10%;
    width: 50%;
    opacity: 0.7;
  }
  .text-1 {
    top: calc((30rem + 30%) / 2);
    left: 40%;
  }
  .text-2 {
    top: calc((1rem + 1%) / 2);
    left: 17%;
  }
  .text-3 {
    top: calc((46rem + 46%) / 2);
    left: 40%;
  }
  .text-4 {
    top: calc((14rem + 14%) / 2);
    left: 17%;
  }
  .text-5 {
    top: calc((45rem + 45%) / 2);
    left: 40%;
  }
  .logo-block {
    height: 3rem;
  }
  .footerblock-2 {
    margin: 0 3% 0 0;
  }
  .social-icons li {
    padding-right: 1rem;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 767px) {
  p {
    font-size: 1rem;
    line-height: 1.1rem;
  }
  .primary-navigation {
    display: none;
    background-image: url(../img/navigation-m2.webp);
    height: 800px;
    aspect-ratio: 0.39201;
    font-size: 1.2rem;
    filter: drop-shadow(4px 4px 70px hsl(0, 0%, 0%));
  }
  .primary-navigation .menu-item {
    margin-left: 19%;
  }
  .primary-navigation .menu-item:nth-child(2) {
    transform: rotate(2deg);
    transform-origin: left;
    margin-top: 121px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(3) {
    transform: rotate(-1deg);
    transform-origin: left;
    margin-top: 207px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(4) {
    transform: rotate(3deg);
    transform-origin: left;
    margin-top: 288px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(5) {
    transform: rotate(-3deg) translateY(10%);
    transform-origin: left;
    margin-top: 377px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(6) {
    transform: rotate(2deg);
    transform-origin: left;
    margin-top: 454px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(7) {
    transform: rotate(-4deg);
    transform-origin: left;
    margin-top: 537px;
    position: absolute;
  }
  .primary-navigation[data-visible] {
    display: block;
  }
  .mobile-navBar {
    display: block;
    width: 100%;
    height: 12%;
    background-image: url(../img/navigation-m.webp);
    position: fixed;
    z-index: 2;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .mobile-nav-toggle[aria-expanded=true] {
    background-image: url("../img/icon-close.svg");
  }
  .mobile-nav-toggle {
    display: block;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 3rem;
    aspect-ratio: 1;
    background-image: url("../img/icon-hamburger.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 6%;
    top: 15%;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .logo-m {
    display: block;
    position: absolute;
    width: 47%;
    left: 5%;
    top: 2%;
    margin: 0;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .logo-d {
    display: none;
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    width: 100vw;
    left: 0;
    padding: 1.5rem 0.5rem;
    background-image: url(../img/textbox-bg-m.webp);
  }
  .text-1::before, .text-1::after,
  .text-2::before,
  .text-2::after,
  .text-3::before,
  .text-3::after,
  .text-4::before,
  .text-4::after,
  .text-5::before,
  .text-5::after {
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    aspect-ratio: 14.28571;
    background-size: 100%;
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -0.8rem;
    background-image: url(../img/textbox-deco-m.webp);
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -0.8rem;
    transform: scaleY(-1);
    background-image: url(../img/textbox-deco-m.webp);
  }
  .section-1 {
    background-image: url(../img/intro-m.jpg);
    aspect-ratio: 0.4;
  }
  .birds {
    top: 9%;
    right: -25%;
    width: 100%;
    opacity: 0.7;
  }
  .text-1 {
    top: calc((52vh + 39%) / 2);
  }
  .meadow {
    background-image: url(../img/meadow-m.webp);
    aspect-ratio: 0.80645;
    top: 48%;
  }
  .stonewall {
    background-image: url(../img/stonewall-m.webp);
    aspect-ratio: 0.82305;
    top: 80%;
  }
  .section-2 {
    aspect-ratio: 0.6;
  }
  .city {
    background-image: url(../img/city-m.webp);
    aspect-ratio: 0.5231;
    top: -20%;
  }
  .text-2 {
    top: calc((-33vh - 33%) / 2);
  }
  .graveyard {
    background-image: url(../img/graveyard-m.webp);
    aspect-ratio: 0.46048;
    top: 12%;
  }
  .section-3 {
    background-image: url(../img/cellar-m.jpg);
    aspect-ratio: 0.38;
  }
  .forest {
    background-image: url(../img/forest-m.webp);
    aspect-ratio: 0.50125;
    top: -8%;
  }
  .text-3 {
    top: calc((48vh + 48%) / 2);
  }
  .text-4 {
    top: calc((7vh + 7%) / 2);
  }
  .text-5 {
    top: 46.5rem;
  }
  .grid-wrapper {
    background-image: url(../img/bg1-m.jpg);
  }
  .content {
    width: 83%;
  }
  .footer {
    height: 12rem;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0 2rem;
  }
  .logo-block {
    margin: 0 0 0 0.5rem;
    height: 3rem;
  }
  .more-height-m {
    height: 16rem;
    padding-bottom: 2.5rem;
  }
}
* {
  scroll-behavior: smooth;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

html,
body {
  overflow: hidden;
  color: hsl(0, 0%, 100%);
  background-color: rgb(10, 10, 10);
  font-family: "Candara", sans-serif;
  width: 100%;
  height: 100%;
  text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.25);
}

h1 {
  margin-bottom: 1.5rem;
}

p {
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.5rem;
}

.visually-hidden {
  position: absolute;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wrapper {
  width: 100vw;
  /* max-width: 1920px; */
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.menu-item a,
.menu-item a:visited,
.social-icons li a,
.social-icons li a:visited,
.footerblock-2 li a,
.footerblock-2 li a:visited,
.footerblock-3 a,
.footerblock-3 a:visited {
  color: hsl(0, 0%, 100%);
}
.menu-item a:hover,
.social-icons li a:hover,
.footerblock-2 li a:hover,
.footerblock-3 a:hover {
  color: hsl(74, 80%, 60%);
}

.mobile-navBar {
  display: none;
}

.primary-navigation {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  height: min(100vh, 900px);
  aspect-ratio: 0.43922;
  z-index: 1;
  position: fixed;
  font-size: min(2.54vh, 20.16px);
  font-weight: 400;
  text-transform: uppercase;
  /* line-height: min(9.4vh, calc(900px * 0.0942)); */
  filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  /* margin-top: min(25vh, calc(900px * 0.249)); */
  /* margin-left: min(8.4vh, calc(900px * 0.088)); */
}
.primary-navigation .menu-item {
  margin-left: 17.5%;
}
.primary-navigation .menu-item:nth-child(2) {
  transform: rotate(2deg);
  transform-origin: left;
  margin-top: 63%;
  position: absolute;
}
.primary-navigation .menu-item:nth-child(3) {
  transform: rotate(-1deg);
  transform-origin: left;
  margin-top: 85.5%;
  position: absolute;
}
.primary-navigation .menu-item:nth-child(4) {
  transform: rotate(3deg);
  transform-origin: left;
  margin-top: 106.5%;
  position: absolute;
}
.primary-navigation .menu-item:nth-child(5) {
  transform: rotate(-3deg) translateY(10%);
  transform-origin: left;
  margin-top: 129%;
  position: absolute;
}
.primary-navigation .menu-item:nth-child(6) {
  transform: rotate(2deg);
  transform-origin: left;
  margin-top: 149.5%;
  position: absolute;
}
.primary-navigation .menu-item:nth-child(7) {
  transform: rotate(-4deg);
  transform-origin: left;
  margin-top: 171%;
  position: absolute;
}

.logo-m {
  display: none;
}

.logo-d {
  display: block;
  position: absolute;
  width: 78%;
  margin-left: 4%;
  margin-top: 20%;
}

.elements {
  position: absolute;
}

.text-1,
.text-2,
.text-3,
.text-4,
.text-5 {
  width: 40rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 3.5rem 5rem;
  text-align: center;
  display: flex;
  align-items: center;
  filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
}
.text-1 p,
.text-2 p,
.text-3 p,
.text-4 p,
.text-5 p {
  margin: 0;
}
.text-1::before, .text-1::after,
.text-2::before,
.text-2::after,
.text-3::before,
.text-3::after,
.text-4::before,
.text-4::after,
.text-5::before,
.text-5::after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  aspect-ratio: 14.65306;
  background-size: 100%;
}

.section-1 {
  width: 100vw;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.birds {
  top: 2%;
  right: 20%;
  width: 30%;
  aspect-ratio: 3.5;
  opacity: 0.78;
}

.text-1 {
  top: calc((36rem + 36%) / 2);
  left: 45%;
}

.meadow {
  width: 100vw;
  aspect-ratio: 1.5;
  background-repeat: no-repeat;
  background-size: cover;
  top: 33%;
}

.stonewall {
  width: 100vw;
  aspect-ratio: 1.54465;
  background-repeat: no-repeat;
  background-size: cover;
  top: 60%;
}

.section-2 {
  width: 100vw;
  aspect-ratio: 0.85;
  position: relative;
}

.city {
  width: 100vw;
  aspect-ratio: 0.68768;
  background-repeat: no-repeat;
  background-size: cover;
  top: -33%;
}

.text-2 {
  top: calc((7rem + 7%) / 2);
  left: 20%;
}

.graveyard {
  width: 100vw;
  aspect-ratio: 0.48217;
  background-repeat: no-repeat;
  background-size: cover;
  top: -21%;
}

.text-3 {
  top: calc((79rem + 79%) / 2);
  left: 45%;
}

.section-3 {
  width: 100vw;
  aspect-ratio: 0.59;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
}

.forest {
  width: 100vw;
  aspect-ratio: 0.61697;
  background-repeat: no-repeat;
  background-size: cover;
  top: -11%;
}

.text-4 {
  top: calc((25rem + 25%) / 2);
  left: 20%;
}

.text-5 {
  top: calc((67rem + 67%) / 2);
  left: 45%;
}

.ffly {
  background-image: url(../img/ffly.png);
  mix-blend-mode: color-dodge;
  background-repeat: no-repeat;
  background-size: cover;
}

.one {
  width: 100px;
  aspect-ratio: 1;
  top: 70%;
  left: 60%;
}

.two {
  width: 120px;
  aspect-ratio: 1;
  top: 95%;
  left: 60%;
}

.three {
  width: 80px;
  aspect-ratio: 1;
  top: 100%;
  left: 50%;
}

.four {
  width: 140px;
  aspect-ratio: 1;
  top: 70%;
  left: 30%;
}

.five {
  width: 110px;
  aspect-ratio: 1;
  top: 80%;
  left: 80%;
}

.six {
  width: 90px;
  aspect-ratio: 1;
  top: 65%;
  left: 46%;
}

.seven {
  width: 110px;
  aspect-ratio: 1;
  top: 15%;
  left: 25%;
}

.eight {
  width: 100px;
  aspect-ratio: 1;
  top: 75%;
  left: 80%;
}

.nine {
  width: 120px;
  aspect-ratio: 1;
  top: 10%;
  left: 5%;
}

.ten {
  width: 80px;
  aspect-ratio: 1;
  top: 40%;
  left: 70%;
}

.eleven {
  width: 140px;
  aspect-ratio: 1;
  top: -5%;
  left: 20%;
}

.twelve {
  width: 110px;
  aspect-ratio: 1;
  top: 40%;
  left: 20%;
}

.thirteen {
  width: 90px;
  aspect-ratio: 1;
  top: 35%;
  left: 46%;
}

.fourteen {
  width: 110px;
  aspect-ratio: 1;
  top: 30%;
  left: 50%;
}

.smoke-1 {
  bottom: 14%;
  left: 11%;
  aspect-ratio: 3.41796;
  opacity: 0.25;
}
.smoke-1 img {
  width: 100%;
}

.smoke-2 {
  bottom: -1%;
  left: -11%;
  aspect-ratio: 5.46777;
  opacity: 0.3;
}
.smoke-2 img {
  width: 500vw;
  transform: scaleX(-1) rotateX(180deg);
}

.grid-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
}

.content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  /* padding: 5rem 0; */
  width: 50%;
  max-width: 50rem;
}

.mme-logo img {
  width: 10rem;
  filter: drop-shadow(2px 2px 2px hsla(0, 0%, 0%, 0.3));
}

.contact,
.impressum,
.datenschutz {
  padding-bottom: 3vh;
}

.footer {
  width: 100vw;
  position: relative;
  height: 6rem;
  background-image: linear-gradient(hsl(202, 85%, 26%) 0%, #010f1b 100%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0.8% 2%;
  border-top-style: solid;
  border-top-width: 1px;
  -o-border-image: linear-gradient(to right, hsla(0, 0%, 80%, 0.25), hsl(0, 0%, 80%), hsla(0, 0%, 80%, 0.25)) 1;
     border-image: linear-gradient(to right, hsla(0, 0%, 80%, 0.25), hsl(0, 0%, 80%), hsla(0, 0%, 80%, 0.25)) 1;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  font-size: 0.9rem;
  /* z-index: 999; */
}

.footerblock-1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.logo-block {
  display: flex;
  justify-content: flex-start;
  height: 3.5rem;
  gap: 1rem;
  margin: 0.2rem 0 0 1rem;
  width: 14rem;
}

.footerblock-1 p,
.footerblock-3 a {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.footerblock-2 {
  display: flex;
  justify-content: center;
  margin: 0 5%;
}

.social-icons {
  display: flex;
  flex-direction: row;
  padding-top: 0.1rem;
}
.social-icons li {
  padding-right: 1.2rem;
  font-size: 1.4rem;
}

.bring-up {
  margin-top: -10rem;
}

.more-height {
  height: 10.5rem;
}

@media only screen and (min-width: 768px) {
  .primary-navigation {
    background-image: url(../img/navigation.webp);
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    /* aspect-ratio: 1.93531; */
    background-image: url(../img/textbox-bg.webp);
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -1.1rem;
    background-image: url(../img/textbox-deco.webp);
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -1.1rem;
    transform: scaleY(-1);
    background-image: url(../img/textbox-deco.webp);
  }
  .section-1 {
    background-image: url(../img/intro.jpg);
  }
  .meadow {
    background-image: url(../img/meadow.webp);
  }
  .stonewall {
    background-image: url(../img/stonewall.webp);
  }
  .city {
    background-image: url(../img/city.webp);
  }
  .graveyard {
    background-image: url(../img/graveyard.webp);
  }
  .section-3 {
    background-image: url(../img/cellar.jpg);
  }
  .forest {
    background-image: url(../img/forest.webp);
  }
  .grid-wrapper {
    background-image: url(../img/bg1.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  p {
    font-size: 1rem;
    line-height: 1.1rem;
  }
  .primary-navigation {
    height: min(100vh, 550px);
    font-size: min(2.54vh, 14.3px);
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    width: 27rem;
    padding: 2rem 2.2rem;
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -0.7rem;
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -0.8rem;
  }
  .birds {
    top: 4%;
    right: -10%;
    width: 50%;
    opacity: 0.7;
  }
  .text-1 {
    top: calc((30rem + 30%) / 2);
    left: 40%;
  }
  .text-2 {
    top: calc((1rem + 1%) / 2);
    left: 17%;
  }
  .text-3 {
    top: calc((46rem + 46%) / 2);
    left: 40%;
  }
  .text-4 {
    top: calc((14rem + 14%) / 2);
    left: 17%;
  }
  .text-5 {
    top: calc((45rem + 45%) / 2);
    left: 40%;
  }
  .logo-block {
    height: 3rem;
  }
  .footerblock-2 {
    margin: 0 3% 0 0;
  }
  .social-icons li {
    padding-right: 1rem;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 767px) {
  p {
    font-size: 1rem;
    line-height: 1.1rem;
  }
  .primary-navigation {
    display: none;
    background-image: url(../img/navigation-m2.webp);
    height: 800px;
    aspect-ratio: 0.39201;
    font-size: 1.2rem;
    filter: drop-shadow(4px 4px 70px hsl(0, 0%, 0%));
  }
  .primary-navigation .menu-item {
    margin-left: 19%;
  }
  .primary-navigation .menu-item:nth-child(2) {
    transform: rotate(2deg);
    transform-origin: left;
    margin-top: 121px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(3) {
    transform: rotate(-1deg);
    transform-origin: left;
    margin-top: 207px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(4) {
    transform: rotate(3deg);
    transform-origin: left;
    margin-top: 288px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(5) {
    transform: rotate(-3deg) translateY(10%);
    transform-origin: left;
    margin-top: 377px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(6) {
    transform: rotate(2deg);
    transform-origin: left;
    margin-top: 454px;
    position: absolute;
  }
  .primary-navigation .menu-item:nth-child(7) {
    transform: rotate(-4deg);
    transform-origin: left;
    margin-top: 537px;
    position: absolute;
  }
  .primary-navigation[data-visible] {
    display: block;
  }
  .mobile-navBar {
    display: block;
    width: 100%;
    height: 12%;
    background-image: url(../img/navigation-m.webp);
    position: fixed;
    z-index: 2;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .mobile-nav-toggle[aria-expanded=true] {
    background-image: url("../img/icon-close.svg");
  }
  .mobile-nav-toggle {
    display: block;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 3rem;
    aspect-ratio: 1;
    background-image: url("../img/icon-hamburger.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 6%;
    top: 15%;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .logo-m {
    display: block;
    position: absolute;
    width: 47%;
    left: 5%;
    top: 2%;
    margin: 0;
    filter: drop-shadow(4px 4px 6px hsla(0, 0%, 0%, 0.8));
  }
  .logo-d {
    display: none;
  }
  .text-1,
  .text-2,
  .text-3,
  .text-4,
  .text-5 {
    width: 100vw;
    left: 0;
    padding: 1.5rem 0.5rem;
    background-image: url(../img/textbox-bg-m.webp);
  }
  .text-1::before, .text-1::after,
  .text-2::before,
  .text-2::after,
  .text-3::before,
  .text-3::after,
  .text-4::before,
  .text-4::after,
  .text-5::before,
  .text-5::after {
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    aspect-ratio: 14.28571;
    background-size: 100%;
  }
  .text-1::before,
  .text-2::before,
  .text-3::before,
  .text-4::before,
  .text-5::before {
    top: -0.8rem;
    background-image: url(../img/textbox-deco-m.webp);
  }
  .text-1::after,
  .text-2::after,
  .text-3::after,
  .text-4::after,
  .text-5::after {
    bottom: -0.8rem;
    transform: scaleY(-1);
    background-image: url(../img/textbox-deco-m.webp);
  }
  .section-1 {
    background-image: url(../img/intro-m.jpg);
    aspect-ratio: 0.4;
  }
  .birds {
    top: 9%;
    right: -25%;
    width: 100%;
    opacity: 0.7;
  }
  .text-1 {
    top: calc((52vh + 39%) / 2);
  }
  .meadow {
    background-image: url(../img/meadow-m.webp);
    aspect-ratio: 0.80645;
    top: 48%;
  }
  .stonewall {
    background-image: url(../img/stonewall-m.webp);
    aspect-ratio: 0.82305;
    top: 80%;
  }
  .section-2 {
    aspect-ratio: 0.6;
  }
  .city {
    background-image: url(../img/city-m.webp);
    aspect-ratio: 0.5231;
    top: -20%;
  }
  .text-2 {
    top: calc((-33vh - 33%) / 2);
  }
  .graveyard {
    background-image: url(../img/graveyard-m.webp);
    aspect-ratio: 0.46048;
    top: 12%;
  }
  .section-3 {
    background-image: url(../img/cellar-m.jpg);
    aspect-ratio: 0.38;
  }
  .forest {
    background-image: url(../img/forest-m.webp);
    aspect-ratio: 0.50125;
    top: -8%;
  }
  .text-3 {
    top: calc((48vh + 48%) / 2);
  }
  .text-4 {
    top: calc((7vh + 7%) / 2);
  }
  .text-5 {
    top: 46.5rem;
  }
  .grid-wrapper {
    background-image: url(../img/bg1-m.jpg);
  }
  .content {
    width: 83%;
  }
  .footer {
    height: 12rem;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0 2rem;
  }
  .logo-block {
    margin: 0 0 0 0.5rem;
    height: 3rem;
  }
  .more-height-m {
    height: 16rem;
    padding-bottom: 2.5rem;
  }
}