/*

*/

:root {
  --page-bg: #111212;

  /* Desktop layout */
  --desktop-width: min(70vw, 920px);
  --desktop-col-gap: clamp(72px, 8vw, 132px);
  --desktop-row-gap: clamp(92px, 13vh, 165px);
  --image-size-desktop: clamp(160px, 13vw, 230px);

  /* Mobile layout */
  --mobile-width: min(86vw, 480px);
  --mobile-col-gap: clamp(34px, 10vw, 68px);
  --mobile-row-gap: clamp(58px, 9vh, 96px);
  --image-size-mobile: clamp(132px, 34vw, 172px);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--page-bg);
  overflow-x: hidden;
}

.menu-wrap {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 20px;
}

.image-menu {
  width: var(--desktop-width);
  display: grid;
  grid-template-columns: repeat(3, var(--image-size-desktop));
  column-gap: var(--desktop-col-gap);
  row-gap: var(--desktop-row-gap);
  align-items: center;
  justify-content: center;
}

.menu-item {
  width: var(--image-size-desktop);
  height: var(--image-size-desktop);
  display: grid;
  place-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}


.menu-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 700px) {
  .menu-wrap {
    padding: 0 16px;
  }

  .image-menu {
    width: var(--mobile-width);
    grid-template-columns: repeat(2, var(--image-size-mobile));
    column-gap: var(--mobile-col-gap);
    row-gap: var(--mobile-row-gap);
  }

  .menu-item {
    width: var(--image-size-mobile);
    height: var(--image-size-mobile);
    order: var(--mobile-order);
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-width: 90vw;
    --mobile-col-gap: 26px;
    --mobile-row-gap: 52px;
    --image-size-mobile: clamp(118px, 35vw, 138px);
  }
}