@media only screen and (max-width: 768px) {
    .m-t-15 {
        margin-top: 15vh;
    }

    /* Mobile-first: single column layout */
    .parent-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.5rem;
        /* consistent gap for mobile */
        align-items: start;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .p-inter-grid {
        padding: 0 1rem !important;
    }

    .parent-grid h1 {
        margin-bottom: 0.5rem;
    }

    .parent-grid p {
        line-height: 1;
    }

    .parent-grid a {
        text-decoration: underline;
        color: var(--color-blue);
    }

    .parent-grid img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
        margin: 0 auto;
        display: block;
        opacity: 0.95;
    }

    .parent-grid .img-w-60,
    .parent-grid .img-w-70,
    .parent-grid .img-w-80 {
        width: 100% !important;
        /* full width on mobile */
    }

    /* Reset explicit grid-placement rules so content flows naturally on mobile */
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div9,
    .div10,
    .div11,
    .div12,
    .div13,
    .div14,
    .div16,
    .div17,
    .div18,
    .div19 {
        grid-column: auto;
        grid-row: auto;
    }

    /* Tablet and up: two-column layout */
    @media (min-width: 768px) {
        .parent-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding-left: 5%;
            padding-right: 5%;
        }

        .parent-grid .img-w-60 {
            width: 60% !important;
        }

        .parent-grid .img-w-70 {
            width: 70% !important;
        }

        .parent-grid .img-w-80 {
            width: 80% !important;
        }

        .parent-grid h1 {
            font-size: 2.5rem;
            margin-bottom: 4vh;
        }

        .parent-grid p {
            font-size: 1.125rem;
        }
    }

    /* Desktop: wider layout tweaks */
    @media (min-width: 1199px) {
        .parent-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2.5rem;
            padding-left: 10%;
            padding-right: 10%;
        }

        .parent-grid h1 {
            font-size: 3rem;
            margin-bottom: 5vh;
        }

        .parent-grid p {
            font-size: 1.25rem;
        }
    }
}