:root{
  --page-w: min(1200px, 100vw);
  --shell-pad-x: 1rem;
  --shell-pad-x-sm: 1.5rem;
  --shell-pad-x-lg: 2.5rem;
}

body.center-all > header,
body.center-all > main,
body.center-all > footer {
  display: block;
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto !important;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

main#main {
  padding-left: var(--shell-pad-x);
  padding-right: var(--shell-pad-x);
}

header > div:first-child,
footer > div:first-child {
  padding-left: var(--shell-pad-x);
  padding-right: var(--shell-pad-x);
}

@media (min-width: 640px) {
  main#main {
    padding-left: var(--shell-pad-x-sm);
    padding-right: var(--shell-pad-x-sm);
  }

  header > div:first-child,
  footer > div:first-child {
    padding-left: var(--shell-pad-x-sm);
    padding-right: var(--shell-pad-x-sm);
  }
}

@media (min-width: 1024px) {
  main#main {
    padding-left: var(--shell-pad-x-lg);
    padding-right: var(--shell-pad-x-lg);
  }

  header > div:first-child,
  footer > div:first-child {
    padding-left: var(--shell-pad-x-lg);
    padding-right: var(--shell-pad-x-lg);
  }
}

@media (max-width: 639px) {
  .th-mobile-scroll {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .th-mobile-scroll > * {
    min-width: min(18rem, 88vw);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .th-mobile-card-list {
    display: grid;
    gap: 0.9rem;
  }
}