@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-nav {
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    overflow: visible !important;
  }

  .site-nav .nav-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 999px !important;
    background: #f0f8fd !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    isolation: isolate !important;
    transform: none !important;
  }

  .site-nav .nav-logo {
    min-width: 0 !important;
  }

  .site-nav .nav-logo img {
    flex: 0 0 auto !important;
  }

  .mobile-nav-menu {
    min-width: 48px !important;
  }

  .mobile-nav-panel {
    right: 0 !important;
    max-width: calc(100vw - 44px) !important;
  }

  main,
  .hero,
  .hero-inner,
  .hero-layout,
  .hero-copy,
  .hero-lede,
  .container {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-inner,
  .hero-copy,
  .hero-lede,
  .hero h1,
  .hero-title-text,
  h1 {
    overflow-wrap: anywhere !important;
    text-wrap: auto !important;
    white-space: normal !important;
  }

  .hero-inner,
  .container {
    width: min(calc(100vw - 28px), 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .calendar-guides .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .calendar-guide-band,
  .calendar-guide-grid,
  .calendar-guide-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .calendar-guide-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .calendar-guides[hidden],
  .calendar-guide-card[hidden] {
    display: none !important;
  }

  .calendar-guide-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 82px auto !important;
  }

  .calendar-guide-thumb {
    min-width: 0 !important;
    min-height: 82px !important;
    border-right: 0 !important;
    border-bottom: 3px solid #4dc3bf !important;
  }

  .calendar-guide-body {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .calendar-guide-body h3,
  .calendar-guide-body p {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

@supports (overflow-x: clip) {
  @media (max-width: 820px) {
    html,
    body {
      overflow-x: clip;
    }
  }
}