body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #222;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    margin: 0 0 0.5em;
    color: #111;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1rem;
    text-align: center;
}

.container {
    display: flex;
    flex-wrap: wrap; /* allows columns to stack on small screens */
    width: 100%;
}

.row {
    display: flex;
    gap: 10px; /* space between columns */
}

.column {
    flex: 50%;
    padding-right: 20px;
    flex: 1 1 50%; /* each takes up 50% of available width */
    display: flex;
    justify-content: center; /* center image horizontally */
    /* align-items: center;  center image vertically (optional) */
    box-sizing: border-box;
    padding: 10px; /* small spacing around images */

    border: 1px solid black; /* thin, solid, black border */
}

img {
  /* border: 2px solid #555; */
}

.column img {
    max-width: 500px; /* image should not exceed 500px */
    width: 100%; /* but scale down responsively */
    max-width: 50vw; /* ensure no more than 50% of window width */
    height: auto; /* maintain aspect ratio */
}

.box {
    border: 1px solid black; /* thin, solid, black border */
    padding: 10px; /* optional – adds space inside the border */
}