@media screen and (max-width: 768px) {
    body {
        padding: 50px 15px;
    }

    .all {
        width: 100%;
        padding: 25px;
        border-radius: 15px;
        height: auto;
    }

    .heading h1 {
        font-size: 24px;
        /* Smaller font size on mobile */
    }

    .heading p {
        font-size: 14px;
    }

    .picture img {
        border-radius: 15px;
    }

    .time p {
        font-size: 16px;
    }

    .nutrition-table {
        grid-template-columns: 1fr;
        /* Stack nutrition facts in one column */
        gap: 5px;
    }

    .nutrition-column {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .all {
        max-width: 600px;
    }

    .heading h1 {
        font-size: 28px;
    }

    .nutrition-table {
        grid-template-columns: repeat(2, 1fr);
    }
}