/* Mobile-first defaults */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
* {
    box-sizing: border-box;
}

.site-header {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;   /* stack items on mobile */
    flex-wrap: wrap;          /* allow wrapping when needed */
    gap: 20px;
    padding: 20px;
}

.column {
    background: #e3e3e3;
    padding: 20px;
    border-radius: 6px;
    font-size: 1.2rem;
    flex: 1 1 100%;           /* full width on mobile */
}

.column1 {
    background: #e3e3e3;
    padding: 20px;
    border-radius: 6px;
    font-size: 1.2rem;
    flex: 1 1 100%;           /* full width on mobile */
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;   /* lay items side-by-side */
        flex-wrap: wrap;       /* allow wrapping if needed */
    }

    .column {
        flex: 0 0 calc(33.333% - 20px);
    }
}

/* Mobile: bigger text */
@media (max-width: 600px) {
    .big-text {
        font-size: 30px;
    }
}

/* Desktop: normal text */
@media (min-width: 601px) {
    .big-text {
        font-size: 20px;
    }
}