/* 2. Mobile-First Grid Setup */
.grid-container {
    display: grid;
    margin: auto auto;
    width: 90%;
    grid-template-columns: 1fr; /* 1 full-width column by default */
    gap: 20px; /* Space between columns */
}

/* 3. Responsive Breakpoint for Larger Screens */
@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* 2 equal columns on tablet/desktop */
    }
}

/* Styling for demo boxes */
.grid-item {

    border: 2px solid #e5e7eb;
    padding: 20px;
    border-radius: 8px;
}
.flex-container {
    display: flex;
    justify-content: center; /* Centers horizontally (Main Axis) */
    align-items: center;     /* Centers vertically (Cross Axis) */
    height: auto;           /* Crucial: Gives the container height to center within */
}
.fig-center{
    text-align: center;
}