/* Layout */

.container {
    min-height: 100vh; /* allow page to grow; don't lock height */
    width: 80vw;       /* 80% of the viewport width */
    margin: 0 auto;    /* Center the container horizontally */
}

/* Lager screen (e.g., tablets or desktops) */
@media (min-width: 768px) {
    .container {
        width: 60vw;
        /* 60% of the viewport width */
    }
}

/* =========================================
   Helper Classes for Spacing (Step 1, IA3)
   ========================================= */

/* Base spacing values */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 3rem;     /* 48px */
}

/* Margin helpers */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }

.m-t-1 { margin-top: var(--space-1); }
.m-t-2 { margin-top: var(--space-2); }
.m-t-3 { margin-top: var(--space-3); }
.m-t-4 { margin-top: var(--space-4); }
.m-t-5 { margin-top: var(--space-5); }

.m-b-1 { margin-bottom: var(--space-1); }
.m-b-2 { margin-bottom: var(--space-2); }
.m-b-3 { margin-bottom: var(--space-3); }
.m-b-4 { margin-bottom: var(--space-4); }
.m-b-5 { margin-bottom: var(--space-5); }

.m-x-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.m-x-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.m-x-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.m-x-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.m-x-5 { margin-left: var(--space-5); margin-right: var(--space-5); }

.m-y-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.m-y-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.m-y-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.m-y-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.m-y-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* Padding helpers */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.p-t-1 { padding-top: var(--space-1); }
.p-t-2 { padding-top: var(--space-2); }
.p-t-3 { padding-top: var(--space-3); }
.p-t-4 { padding-top: var(--space-4); }
.p-t-5 { padding-top: var(--space-5); }

.p-b-1 { padding-bottom: var(--space-1); }
.p-b-2 { padding-bottom: var(--space-2); }
.p-b-3 { padding-bottom: var(--space-3); }
.p-b-4 { padding-bottom: var(--space-4); }
.p-b-5 { padding-bottom: var(--space-5); }

.p-x-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.p-x-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.p-x-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.p-x-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.p-x-5 { padding-left: var(--space-5); padding-right: var(--space-5); }

.p-y-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.p-y-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.p-y-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.p-y-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.p-y-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }