.wm2-page {
  min-width: 320px;
}

.wm2-page__frame {
  min-width: 0;
}

.wm2-page__main {
  display: flow-root;
  min-height: 100vh;
  padding-top: calc(
    var(--wm2-header-top-gap) + env(safe-area-inset-top, 0px) + 96px
  );
}

.wm2-skip-link {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 80;
  padding: 10px 14px;
  border-radius: 4px;
  color: var(--wm2-on-action);
  background: var(--wm2-action);
  font: 600 13px/1.2 var(--wm2-font);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 180ms var(--wm2-ease);
}

.wm2-skip-link:focus-visible {
  outline: 2px solid var(--wm2-accent);
  outline-offset: 3px;
  transform: translateY(0);
}

@media (min-width: 980px) {
  .wm2-page__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .wm2-page__frame > main {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .wm2-page__frame > .wm2-footer {
    grid-area: 2 / 1;
    min-width: 0;
  }

  .wm2-page__main {
    padding-top: calc(
      var(--wm2-header-top-gap)
      + env(safe-area-inset-top, 0px)
      + var(--wm2-header-utility-height)
      + var(--wm2-header-tier-gap)
      + var(--wm2-header-primary-height)
      + var(--wm2-header-content-clearance)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm2-skip-link {
    transition-duration: 0ms;
  }
}