:root { color: #000; background: #fff; font-family: "Inria Serif", Georgia, serif; }
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { overflow-x: hidden; }

.page { background: #fff; min-height: 100svh; position: relative; width: 100%; }
.logo { display: block; height: auto; width: min(14.1vw, 361px); }

.home { min-height: 100svh; }
.home .logo { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.gallery-link { color: inherit; font-size: clamp(26px, 1.875vw, 48px); line-height: 1; position: absolute; right: 13.25vw; text-decoration: none; top: 50%; transform: translateY(-50%); }
.gallery-link:hover, .gallery-link:focus-visible { text-decoration: underline; text-underline-offset: .14em; }

.gallery { align-items: center; display: flex; flex-direction: column; min-height: 100svh; padding: clamp(50px, 7.8vh, 112px) 20px 70px; }
.gallery .logo { flex: none; }
.product { align-items: center; display: flex; flex-direction: column; margin-top: clamp(120px, 16.3vh, 235px); }
.product img { display: block; height: auto; object-fit: cover; width: min(20.4vw, 522px); text-decoration: none;color: inherit}
.product p { font-size: clamp(30px, 1.875vw, 48px); line-height: 1.12; margin: clamp(32px, 3vh, 43px) 0 0; text-align: center; }

@media (max-width: 700px) {
  .logo { width: min(64vw, 361px); }
  .home .logo { top: 44%; }
  .gallery-link { bottom: 13vh; font-size: 31px; right: 50%; top: auto; transform: translateX(50%); }
  .gallery { padding-top: 56px; }
  .product { margin-top: 16vh; }
  .product img { width: min(76vw, 522px); }
}
a,

a:visited,

a:hover,

a:focus,

a:active {

  color: inherit;

  text-decoration: none;
}