@import url('https://fonts.googleapis.com/css2?family=Megrim&display=swap');

:where(*, *::before, *::after) {
  box-sizing: border-box;
  font-family: 'Megrim', cursive !important;
}

html {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
}

body {
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.55;
}

:where(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote, label, summary, a, span) {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.7rem, 5vw, 3.25rem);
  line-height: 1.12;
}

h3 {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  line-height: 1.18;
}

:where(h4, h5, h6) {
  font-size: clamp(1.125rem, 2.5vw, 1.6rem);
  line-height: 1.25;
}

:where(main, header, footer, section, article, aside, nav, .layout-container, .region, .block, .node, .field, .view, .views-row) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(nav ul, [role='navigation'] ul, .primary-nav__menu, .menu) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(nav li, .menu-item, .primary-nav__menu-item) {
  min-inline-size: 0;
}

:where(nav a, [role='navigation'] a, .menu a) {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(img, picture, svg, video, canvas, iframe, embed, object) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

:where(iframe, embed, object) {
  inline-size: 100%;
}

:where(table) {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

:where(pre, code, kbd, samp) {
  max-inline-size: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

:where(input, button, textarea, select) {
  max-inline-size: 100%;
  font: inherit;
}

@media (max-width: 64rem) {
  body {
    font-size: 16px;
  }

  :where(.layout-container, .region, .block, .node, .field, .view, main, header, footer) {
    inline-size: 100%;
  }

  :where(nav ul, [role='navigation'] ul, .primary-nav__menu) {
    flex-wrap: wrap;
  }
}

@media (max-width: 40rem) {
  h1 {
    font-size: clamp(1.9rem, 12vw, 3rem);
  }

  h2 {
    font-size: clamp(1.55rem, 9vw, 2.35rem);
  }

  :where(nav a, [role='navigation'] a, .menu a) {
    inline-size: auto;
    min-block-size: 44px;
    align-items: center;
  }
}