.app-container {
  min-height: 100vh;
  background: var(--bg);
}

.app-content {
  min-width: 0;
}

.desktop-side-ad-div {
  display: none;
}

.layout-bottom-spacer {
  height: 0;
}

.wasteys-footer-ad-div {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #163B2D;
}

.wasteys-footer-ad-div .wasteys-footer-ad.adsbygoogle {
  width: 100% !important;
  height: 120px !important;
}

.wasteys-top-ad-div {
  width: 100%;
  max-height: 120px;
  overflow: hidden;
  background: var(--bg);
}

.wasteys-top-ad-div .adsbygoogle {
  width: 100% !important;
  height: 120px !important;
}

@media (min-width: 1200px) {
  .app-container {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(0, 1200px) minmax(160px, 1fr);
    gap: 16px;
    /* stretch (not start): lets the ad columns match the row's real height
       (set by the center content column) so the sticky ad below has full
       room to travel the whole page instead of being capped at 0. */
    align-items: stretch;
  }

  .desktop-side-ad-div {
    display: block;
    height: 100%;
  }

  .desktop-side-ad-div > div {
    position: sticky;
    top: 0;
    height: 100vh;
    /* Cap at the real column height (100% of the stretched .desktop-side-ad-div)
       so on pages whose content is shorter than one viewport this doesn't
       overflow past the content column and leave empty ad space below the
       footer - it only ever grows up to 100vh on taller pages. */
    max-height: 100%;
  }
}