:root {
  --unit: clamp(90px, 16vw, 160px);
  --row: calc(var(--unit) * 1.3);

  --matte-black: #0e0e0e;
  --gold: #caa24a;
  --gold-glow: rgba(245, 210, 122, 0.25);

  --gap: clamp(8px, 1.5vw, 16px);
}


* {
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  min-height: 100%;
}


body {
  margin: 0;

  background:
    radial-gradient(
      circle at top,
      #1a1a1a,
      var(--matte-black) 70%
    );
}



.page {

  min-height:100vh;

  display:flex;

  flex-direction:column;

  align-items:center;

}

.grid-wrapper {
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    clamp(10px,3vw,20px);
}

.grid {
  display:grid;
  grid-template-columns:
    repeat(4, calc(var(--unit) * 1.3));
  grid-template-rows:
    repeat(3,var(--row));
  gap:var(--gap);
  max-width:100%;
}

.a {
  grid-column:1;
  grid-row:1;
}

.b {
  grid-column:2;
  grid-row:1;
}

.c {
  grid-column:3 / span 2;
  grid-row:1 / span 2;
}

.d {
  grid-column:1;
  grid-row:2;
}

.e {
  grid-column:2;
  grid-row:2;
}

.f {
  grid-column:1;
  grid-row:3;
}

.g {
  grid-column:2;
  grid-row:3;
}

.h {
  grid-column:3 / span 2;
  grid-row:3;
  display:flex;
  align-items:center;
  padding:
    clamp(10px,2vw,20px);
}

.tile {
  position:relative;
  overflow:hidden;
  min-width:0;
  background:
    linear-gradient(
      145deg,
      #141414,
      #0b0b0b
    );
  border-radius:
    clamp(6px,1vw,12px);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 6px var(--gold-glow);
}

.tile img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor: pointer;
}

.tile-text {
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
}

.contact-text {
  font-family:
    'Dancing Script',
    cursive;
  color:var(--gold);
  font-size:
    clamp(1rem,2vw,1.4rem);
  line-height:1.5;
}


.contact-text a {
  color:var(--gold);
  text-decoration:none;
}

.lang-switch {
  position:absolute;
  bottom:10px;
  right:10px;
  display:flex;
  gap:10px;
  font-family:
    'Dancing Script',
    cursive;
  font-size:.85rem;
}

.lang-switch span {
  color:var(--gold);
  cursor:pointer;
  opacity:.6;
}

.lang-switch span:hover {
  opacity:1;
}

.footer {
  padding:15px;
  font-family:
    'Dancing Script',
    cursive;
  color:var(--gold);
  opacity:.7;
}

@media(max-width:1024px) {
  .grid {
    width:100%;
    max-width:700px;
    grid-template-columns:
      repeat(2,1fr);
    grid-template-rows:auto;
  }

  .a {
    grid-column:1;
    grid-row:1;
  }

  .b {
    grid-column:2;
    grid-row:1;
  }

  .c {
    grid-column:1 / -1;
    grid-row:2;
    aspect-ratio:2 / 1.3;
  }

  .d {
    grid-column:1;
    grid-row:3;
  }

  .e {
    grid-column:2;
    grid-row:3;
  }

  .f {
    grid-column:1;
    grid-row:4;
  }

  .g {
    grid-column:2;
    grid-row:4;
  }

  .h {
    grid-column:1 / -1;
    grid-row:5;
    aspect-ratio:2 / .35;
  }
}

@media(max-width:600px) {
  .grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    grid-template-areas:
      "a b"

      "c c"

      "d e"

      "f g"

      "h h";

    gap:10px;
    width:100%;
  }


  .a,
  .b,
  .c,
  .d,
  .e,
  .f,
  .g,
  .h {
    grid-column:auto;
    grid-row:auto;
  }

  .a { grid-area:a; }
  .b { grid-area:b; }
  .c { grid-area:c; }
  .d { grid-area:d; }
  .e { grid-area:e; }
  .f { grid-area:f; }
  .g { grid-area:g; }
  .h { grid-area:h; }

  .tile {
    min-height:0;
  }

  .a,
  .b,
  .d,
  .e,
  .f,
  .g {
    aspect-ratio:1 / 1.3;
  }

  .c {
    aspect-ratio:2 / 1.3;
  }

  .h {
    aspect-ratio:2 / .7;
    padding:15px;
  }

  .contact-text {
    font-size:
      clamp(.95rem,4vw,1.1rem);
  }

}

@media(max-width:360px) {

  .grid-wrapper {
    padding:8px;
  }

  .grid {
    gap:8px;
  }

  .contact-text {
    font-size:.9rem;
  }

  .lang-switch {
    font-size:.65rem;
  }

}