/* 1 */

    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        background-color: #4796fd;
        color: #333333;
    }

    header {
        background: #19a120;
        color: #fff;
        padding: 20px 0;
        text-align: center;
    }

    nav {
        background: #186111;
        padding: 10px;
        text-align: center;
    }

    nav a {
        color: #fff;
        margin: 0 10px;
        text-decoration: none;
        font-weight: bold;
    }

    nav a:hover {
        text-decoration: underline;
    }

    .container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 0 15px;
        display: flex;
        gap: 20px;
    }

    main {
        flex: 3;
    }

    aside {
        flex: 1;
        background: #ffffff;
        padding: 15px;
        border-radius: 5px;
    }

    article {
        background: #a1e7a7;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    article h2 {
        margin-top: 0;
    }

    .post-meta {
        font-size: 0.9em;
        color: #777777;
        margin-bottom: 10px;
    }

    footer {
        text-align: center;
        padding: 15px;
        background: #105706;
        color: #fff;
        margin-top: 20px;
    }

    @media (max-width: 768px) {
        .container {
            flex-direction: column;
        }
    }



/* 2 */

    .layout {
        display: flex;
        flex-direction: column; /* Mobile first: outer pictures*/
        gap: 16px;
    }

    .side-img.animal {
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

            /* Desktop and up */
    @media (min-width: 768px) {

        .layout {
            flex-direction: row;
            align-items: center;
        }

        .side-img.animal {
            flex: 0 1 20%;   /* flexible image width */
            max-width: 260px;
        }

        .content {
            flex: 1;        /* fills remaining space */
        }
    }



/* 3 */

    .crop.large {
        width: 400px;
        height: 300px;
        object-fit: cover;      /* crops */
        object-position: center; /* change crop focus */
    }



/* 4 */

    .box {
        width: 400px;
        height: 250px;
            
    }



/* 5 */

    .crop.tall {
        width: 280px;
        height: 400px;
        object-fit: cover;      /* crops */
        object-position: center; /* change crop focus */
    }



/* 6 */

         /* Centered content */
    .content {
        text-align: center;
    }

            /* Side images */
    .side-img.animal {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 260px;
        max-height: 1420px;
        height: auto;
        pointer-events: none; /* decorative */
    }

            /* Left & right placement */
    .side-img.animal.left {
        left: -50px;
    }

    .side-img.animal.right {
        right: -50px;
    }
            /* Make iframe responsive */
    iframe {
        width: 100%;
        max-width: 1350px;
        height: 80vh;
        border: none;
    }

            /* Mobile behavior */
    @media (max-width: 900px) {
        .side-img.vine {
            display: none;
        }

        iframe {
            height: 60vh;
        }
    }


/* 9 */

            /* Anchor spacing if you scroll to #section4 */
    #section4 {
        scroll-margin-top: 80px;
    }

            /* Page container */
    .page {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 0;
    }

            /* Centered content */
    .content {
        text-align: center;
    }

            /* Side images */
    .side-img.vine {
        position: absolute;
        top: 50%;
        transform: translateY(-46.5%);
        width: 100px;
        max-height: 1420px;
        height: auto;
        pointer-events: none; /* decorative */
    }

            /* Left & right placement */
    .side-img.vine.left {
        left: -220px;
    }

    .side-img.vine.right {
        right: -220px;
    }
            /* Make iframe responsive */
    iframe {
        width: 100%;
        max-width: 1350px;
        height: 80vh;
        border: none;
    }

            /* Mobile behavior */
    @media (max-width: 900px) {
        .side-img.vine {
            display: none;
        }

        iframe {
            height: 60vh;
        }
    }