@font-face {
  font-family: "Cy";
  src: url("fonts/cy/400.normal.woff2") format("woff2"), url("fonts/cy/400.normal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cy";
  src: url("fonts/cy/600.normal.woff2") format("woff2"), url("fonts/cy/600.normal.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/monument-grotesk/400.normal.woff2") format("woff2"), url("fonts/monument-grotesk/400.normal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-green: #384237;
  --color-pink: #c19290;
  --color-white: #f8f0e3;
  --font-1: "Cy", sans-serif;
  --font-2: "Monument Grotesk", sans-serif;
}
html,
body {
  color: var(--color-white);
  font-family: var(--font-1);
  font-size: clamp(1.111111111vw, 1.111111111vw, 1.111111111vw); /* 16px */
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.logo svg {
  display: block;
  height: auto;
  width: 100%;
}
.extra {
  background-color: var(--color-pink);
  display: block;
  position: absolute;
}
.extra.vertical {
  width: clamp(0.4166666667vw, 0.4166666667vw, 0.4166666667vw); /* 6px */
}
.extra.horizontal {
  height: clamp(0.4166666667vw, 0.4166666667vw, 0.4166666667vw); /* 6px */
}
.extra.line-1 {
  bottom: 0;
  left: clamp(4.166666667vw, 4.166666667vw, 4.166666667vw); /* 60px */
  top: 0;
}
.extra.line-2 {
  left: 0;
  top: clamp(8.333333333vw, 8.333333333vw, 8.333333333vw); /* 120px */
  width: clamp(55.41666667vw, 55.41666667vw, 55.41666667vw); /* 798px */
}
.extra.line-3 {
  height: clamp(8.194444444vw, 8.194444444vw, 8.194444444vw); /* 118px */
  left: clamp(49.79166667vw, 49.79166667vw, 49.79166667vw); /* 717px */
  top: clamp(4.583333333vw, 4.583333333vw, 4.583333333vw); /* 66px */
}
.extra.line-4 {
  bottom: clamp(11.38888889vw, 11.38888889vw, 11.38888889vw); /* 164px */
  left: 0;
  width: clamp(21.66666667vw, 21.66666667vw, 21.66666667vw); /* 312px */
}
.extra.line-5 {
  right: 0;
  top: clamp(16.38888889vw, 16.38888889vw, 16.38888889vw); /* 236px */
  width: clamp(15.83333333vw, 15.83333333vw, 15.83333333vw); /* 228px */
}
.extra.line-6 {
  height: clamp(12.77777778vw, 12.77777778vw, 12.77777778vw); /* 184px */
  right: clamp(6.597222222vw, 6.597222222vw, 6.597222222vw); /* 95px */
  top: clamp(10.06944444vw, 10.06944444vw, 10.06944444vw); /* 145px */
}
.extra.line-7 {
  bottom: clamp(11.38888889vw, 11.38888889vw, 11.38888889vw); /* 164px */
  right: 0;
  width: clamp(20.48611111vw, 20.48611111vw, 20.48611111vw); /* 295px */
}
.extra.line-8 {
  bottom: clamp(7.708333333vw, 7.708333333vw, 7.708333333vw); /* 111px */
  height: clamp(7.361111111vw, 7.361111111vw, 7.361111111vw); /* 106px */
  right: clamp(13.68055556vw, 13.68055556vw, 13.68055556vw); /* 197px */
}
.container {
  padding: 0;
}

[role="header"] .logo.high-panoramic-padel {
  left: clamp(7.847222222vw, 7.847222222vw, 7.847222222vw); /* 113px */
  position: absolute;
  top: clamp(2.638888889vw, 2.638888889vw, 2.638888889vw); /* 38px */
  width: clamp(25.48611111vw, 25.48611111vw, 25.48611111vw); /* 367px */
}
[role="footer"] .credit {
  align-items: center;
  display: grid;
  grid-template-areas: "title logo";
  grid-template-columns: auto 56.98005698%;
  position: absolute;
  right: clamp(4.166666667vw, 4.166666667vw, 4.166666667vw); /* 60px */
  top: clamp(2.152777778vw, 2.152777778vw, 2.152777778vw); /* 31px */
  width: clamp(24.375vw, 24.375vw, 24.375vw); /* 351px */
}
[role="footer"] .credit .title {
  font-family: var(--font-2);
  font-size: 0.89375em;
  font-weight: 400;
  grid-area: title;
  margin: 0;
}
[role="footer"] .credit .logo.high-interior-and-architech {
  grid-area: logo;
}
[role="footer"] .logo.high-panoramic-padel {
  left: clamp(7.847222222vw, 7.847222222vw, 7.847222222vw); /* 113px */
  position: absolute;
  top: clamp(2.638888889vw, 2.638888889vw, 2.638888889vw); /* 38px */
  width: clamp(25.48611111vw, 25.48611111vw, 25.48611111vw); /* 367px */
}

section.intro {
  background-blend-mode: hard-light;
  background-color: var(--color-green);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
section.intro .title {
  color: inherit;
  font-size: 5.75em;
  font-weight: 600;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(39.72222222vw, 39.72222222vw, 39.72222222vw); /* 572px */
}
section.intro .description {
  bottom: clamp(2.986111111vw, 2.986111111vw, 2.986111111vw); /* 43px */
  left: clamp(7.847222222vw, 7.847222222vw, 7.847222222vw); /* 113px */
  letter-spacing: 0.0625em;
  margin: 0;
  position: absolute;
  width: clamp(42.98611111vw, 42.98611111vw, 42.98611111vw); /* 619px */
}
section.intro .container {
  min-height: 100vh;
  min-height: 100dvh;
}

@media (max-width: 767px) and (orientation: portrait) {
  html,
  body {
    font-size: clamp(2.570093458vw, 2.570093458vw, 2.570093458vw); /* 11px */
  }

  .extra.vertical {
    width: clamp(1.401869159vw, 1.401869159vw, 1.401869159vw); /* 6px */
  }
  .extra.horizontal {
    height: clamp(1.401869159vw, 1.401869159vw, 1.401869159vw); /* 6px */
  }
  .extra.line-1 {
    left: clamp(10.04672897vw, 10.04672897vw, 10.04672897vw); /* 43px */
  }
  .extra.line-2 {
    top: clamp(22.42990654vw, 22.42990654vw, 22.42990654vw); /* 96px */
    width: clamp(84.57943925vw, 84.57943925vw, 84.57943925vw); /* 362 */
  }
  .extra.line-4 {
    bottom: clamp(50.70093458vw, 50.70093458vw, 50.70093458vw); /* 217px */
    width: clamp(27.80373832vw, 27.80373832vw, 27.80373832vw); /* 119px */
  }
  .extra.line-5 {
    top: clamp(58.87850467vw, 58.87850467vw, 58.87850467vw); /* 252px */
    width: clamp(35.28037383vw, 35.28037383vw, 35.28037383vw); /* 151px */
  }
  .extra.line-6 {
    height: clamp(28.5046729vw, 28.5046729vw, 28.5046729vw); /* 122px */
    right: clamp(15.18691589vw, 15.18691589vw, 15.18691589vw); /* 65px */
    top: clamp(45.09345794vw, 45.09345794vw, 45.09345794vw); /* 193px */
  }
  .extra.line-3,
  .extra.line-7,
  .extra.line-8 {
    display: none;
  }

  [role="header"] .logo.high-panoramic-padel {
    left: clamp(15.65420561vw, 15.65420561vw, 15.65420561vw); /* 67px */
    top: clamp(7.943925234vw, 7.943925234vw, 7.943925234vw); /* 34px */
    width: clamp(68.92523364vw, 68.92523364vw, 68.92523364vw); /* 295px */
  }
  [role="footer"] .credit {
    bottom: clamp(8.177570093vw, 8.177570093vw, 8.177570093vw); /* 35px */
    left: clamp(25.23364486vw, 25.23364486vw, 25.23364486vw); /* 108px */
    top: initial;
    width: clamp(50vw, 50vw, 50vw); /* 214px */
  }

  section.intro .title {
    line-height: 1;
    text-align: center;
    width: clamp(53.97196262vw, 53.97196262vw, 53.97196262vw); /* 231px */
  }
  section.intro .description {
    bottom: clamp(22.19626168vw, 22.19626168vw, 22.19626168vw); /* 95px */
    left: clamp(19.62616822vw, 19.62616822vw, 19.62616822vw); /* 84px */
    letter-spacing: 0.09090909091em;
    text-align: center;
    width: clamp(68.22429907vw, 68.22429907vw, 68.22429907vw); /* 292px */
  }
  section.intro .description br {
    display: none;
  }
}

@media (orientation: portrait) {
  section.intro {
    background-image: url("images/intro/portrait.jpg");
  }
}

@media (orientation: landscape) {
  section.intro {
    background-image: url("images/intro/landscape.jpg");
  }
}