.page-container {
  display: flex;
  flex-direction: column;
  width: 1024px;
  max-width: 100%;
  min-height: 100vh; /* Fallback for older mobile browsers */
  min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.page-container > main {
  position: relative;
  flex: 1;
}

.page-close-btn { /* 🧐 AUDIT: I think this got removed from all components, if we don't use, let's remove. */
  position: absolute;
  top: 8px;
  right: 8px;
}

.page-main {
  background-color: rgba(100,100,0,0.1);
  width: 80%;
  margin: auto;
  text-align: center;
}

.page-main > h1, .page-main > h2, .page-main > h3 {
  margin: 10%;
}

/* ========== MOBILE STYLES ========== */
@media only screen and (max-width: 600px) {
  
  .page-main {
    width: 90%;
  }

}