/* ===== Base ===== */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    font-family: "Times New Roman", sans-serif;
    margin: 0;
    background: #f5f5f5;
}

.wrapper {
    max-width: 1200px;
    margin: auto;
    background: white;
    padding: 1rem;
}

.banner-img {
    width: 100%;
    max-height: 300px;
    max-width: 1200px;  /* remove image size limit */
    object-fit: fill;
}

h2 { text-align: center; }

.info {
    display: grid;
    grid-column: 2;
    text-align: left;
}

/* ===== GRID BASE ===== */
.row {
    display: grid;  /* define grid container */
    gap: 1rem;  /* spacing between grid items */
    margin-bottom: 2rem;  /* spacing below each row */
}

/* ===== Column styling ===== */
[class*="col-"] { padding: 0.5rem; }  /* padding for all column items */

/* ===== COLORS ===== */
.col-1 { background: #A3CDD9; }
.col-2 { background: #FFFCE6; }
.col-3 { background: #D8E8E4; }
.col-4 { background: #FFD3B6; }
.col-5 { background: #FFAAA5; }
.col-6 { background: #D5AAFF; }

/* ===== DEFAULT (MOBILE) ===== */
.row { grid-template-columns: 1fr; }  /* single column layout stacked vertically */

.row:nth-of-type(6) .col-6 .info p { text-align: center; }

/* ===== TABLET ===== */
@media (min-width: 480px) and (max-width: 1024px) {

    /* Row 1 & 2 → 2 columns */
    .row:nth-of-type(1),
    .row:nth-of-type(2) {
        grid-template-columns: repeat(2, 1fr);  /* 2 equal columns */
    }

    /* Row 3 still stacked */
    .row:nth-of-type(3) { grid-template-columns: 1fr; }  /* single column */
    .row:nth-of-type(3) .col-3 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 2 / 5; /* wide column (span 3 columns) */
        column-gap: 1rem;
    }

    /* Row 4 */
    .row:nth-of-type(4) .col-4 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 1 / -1;  /* span all columns -> full width */
        column-gap: 1rem;
    }

    /* Row 5 reorder middle item to top */
    .row:nth-of-type(5) { grid-template-columns: repeat(2, 1fr); }  /* 2 equal columns */

    .col-5:nth-child(2) {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 1 / 3;  /* span both columns */
        grid-row: 1;         /* top row */
        column-gap: 1rem;
    }

    .col-5:nth-child(1) {
        grid-column: 1 / 2;  /* bottom left */
        grid-row: 2;
    }

    .col-5:nth-child(3) {
        grid-column: 2 / 3;  /* bottom right */
        grid-row: 2;
    }

    /* Row 6 */
    .row:nth-of-type(6) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .col-6:nth-last-child(2),
    .col-6:nth-last-child(3),
    .col-6:last-child { grid-column: 1 / span 2; }

    .row:nth-of-type(6) .col-6 .info p { text-align: center; }
}

/* ===== DESKTOP ===== */
@media (min-width: 1025px) {

    /* Row 1 → 4 columns */
    .row:nth-of-type(1) { grid-template-columns: repeat(4, 1fr); }

    /* Row 2 → 2 columns */
    .row:nth-of-type(2) { grid-template-columns: repeat(2, 1fr); }
    .row:nth-of-type(2) .col-2 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-gap: 1rem;
    }

    /* ===== ROW 3 (1 | 3 layout) ===== */
    .row:nth-of-type(3) { grid-template-columns: repeat(4, 1fr); }  /* 4 columns to allow wide item */

    .row:nth-of-type(3) .col-3:first-child { grid-column: 1 / 2; }  /* narrow column */
    .row:nth-of-type(3) .col-3:last-child {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 2 / 5; /* wide column (span 3 columns) */
        column-gap: 1rem;
    }

    /* ===== ROW 4 (full width) ===== */
    .row:nth-of-type(4) { grid-template-columns: repeat(4, 1fr); }  /* base column */
    .row:nth-of-type(4) .col-4 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 1 / -1;  /* span all columns -> full width */
        column-gap: 1rem;
    }

    /* ===== ROW 5 (1-2-1 layout) ===== */
    .row:nth-of-type(5) {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        grid-auto-flow: dense; /* fill in gaps to prevent box2 jumping above */
    }

    .col-5:nth-child(1) { grid-column: 1 / 2; }  /* left */
    .col-5:nth-child(2) {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column: 2 / 4;  /* middle (span 2 columns) */
        column-gap: 1rem;
    }
    .col-5:nth-child(3) { grid-column: 4 / 5; }  /* right */

    /* ===== ROW 6 (simple unique layout) ===== */
    .row:nth-of-type(6) {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }

    /* last 2 cards stack in last column */
    .col-6:nth-last-child(2),
    .col-6:last-child { grid-column: 1 / span 5; }

    .row:nth-of-type(6) .col-6 .info p { text-align: center; }
}

/* ===== Images ===== */
img {
    width: 200px;
    height: 350px;
    object-fit: cover;
    display: block;  /* remove inline gap */
    margin: auto;  /* center image */

    border: 5px solid #ffffff;
}