.twl-site-shell {
  min-height: 100vh;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.twl-shell {
  width: var(--twl-shell-width);
  margin: 0 auto;
}

.twl-shell--wide {
  width: 100%;
  max-width: none;
}

.twl-main {
  padding: var(--twl-space-xl) 0 var(--twl-space-2xl);
  flex: 1 0 auto;
}

.twl-main--home {
  padding: 0 0 var(--twl-space-2xl);
}

.twl-main--planner {
  padding: 0 0 var(--twl-space-xl);
}

.twl-main--commerce {
  padding-inline: 0;
}

.twl-main--commerce > .twl-commerce-content {
  width: 100%;
  padding-inline: 0;
  box-sizing: border-box;
}

.twl-main--commerce > .twl-commerce-content > * {
  min-width: 0;
}

.twl-main > article,
.twl-main > section,
.twl-main > div {
  min-width: 0;
}

.twl-header__inner,
.twl-footer__grid,
.twl-hero__grid {
  display: grid;
  gap: var(--twl-space-lg);
}

.twl-header__inner {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 1rem 39.026px;
  position: relative;
}

.twl-footer__grid,
.twl-hero__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.twl-hero__grid {
  grid-template-columns: 1fr;
}

.twl-footer__grid {
  align-items: center;
  padding: 0 39.026px;
}

.twl-prose {
  max-width: 72ch;
}

.twl-nav {
  justify-self: end;
}

.twl-footer__brand {
  justify-self: end;
}

.twl-surface--planner {
  max-width: none;
}

.page .twl-main > .type-page,
.home .twl-main > .type-page {
  max-width: 100%;
}

.twl-main > :not(.twl-hero) {
  padding-inline: var(--twl-content-inline-pad);
  box-sizing: border-box;
}

.twl-main > .twl-surface--planner {
  padding-inline: 0;
}

.twl-main--commerce > :not(.twl-hero) {
  padding-inline: 0;
}

.twl-main--commerce > .twl-hero {
  margin-inline: 0;
}

.twl-header .twl-shell,
.twl-footer .twl-shell {
  width: 100%;
  max-width: none;
}

@media (max-width: 960px) {
  .twl-hero__grid {
    grid-template-columns: 1fr;
  }

  .twl-header__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .twl-header__inner {
    padding-inline: 1rem;
  }

  .twl-prose,
  .twl-main > :not(.twl-hero) {
    padding-inline: 1rem;
  }

  .twl-main--commerce {
    padding-inline: 0;
  }

  .twl-main--commerce > .twl-commerce-content {
    padding-inline: 0;
  }

  .twl-main--commerce > .twl-hero {
    margin-inline: 0;
  }

  .twl-footer__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.6rem;
  }

  .twl-footer__brand {
    justify-self: end;
  }
}