.intro {
    text-align: left;      /* ← left aligned */
    margin-bottom: 30px;
    margin-top: 20px;
}


/* ===== img800 ROWS ===== */



.img800-row {

    width: 100%;
    margin: 40px auto;
}


.img800 {
    width: 800px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 770px) {


.img800-row {
    display: flex;
    flex-direction: column;
}

.img800 {
    order: 2;
    float: none !important;
    display: block;
    margin: -10px 0 0 0 !important;   /* reset margins */
    width: 100%;
    max-width: 520px;
}

.img800 {
    width: 100%;
    max-width: 100%;
}

.img800-row h2 {
    order: 1;
}

.img800-row p,
.img800-row div {
    order: 2;
}

}

.img800-row {
    text-align: left;
}



/* Clear float after each row */
.img800-row::after {
    content: "";
    display: block;
    clear: both;
}

/* POSITION OPTIONS */

/* Top Right */
.img800-top-right .img800 {
    float: right;
    margin: 0 0 0px 20px;
}

/* Top Left */
.img800-top-left .img800 {
    float: left;
    margin: 0 20px 0 0;
}

/* Bottom Right */
.img800-bottom-right .img800 {
    float: right;
    margin: 20px 0 0 20px;
}

/* Bottom Left */
.img800-bottom-left .img800 {
    float: left;
    margin: 20px 20px 0 0;
}

img800::cue {
    color: yellow;              /* text color */
    font-size: 1.5em;           /* larger font */
    font-family: "Arial", sans-serif;
    background: rgba(0,0,0,0.5); /* semi-transparent background */
    text-align: center;
}

.img800-row::after {
    content: "";
    display: block;
    clear: both;
}

.video-row {

    width: 100%;
    margin: 40px auto;
}


.demo-video {
    width: 480px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid rgb(200,200,200);
    border-radius: 10px;
}

@media (max-width: 770px) {


.video-row {
    display: flex;
    flex-direction: column;
}

.demo-video {
    order: 2;
    float: none !important;
    display: block;
    margin: -10px 0 0 0 !important;   /* reset margins */
    width: 100%;
    max-width: 520px;
}

.demo-video {
    width: 100%;
    max-width: 100%;
}

.video-row h2 {
    order: 1;
}

.video-row p,
.video-row div {
    order: 2;
}

}

.video-row {
    text-align: left;
}



/* Clear float after each row */
.video-row::after {
    content: "";
    display: block;
    clear: both;
}

/* POSITION OPTIONS */

/* Top Right */
.video-top-right .demo-video {
    float: right;
    margin: 0 0 0px 20px;
}

/* Top Left */
.video-top-left .demo-video {
    float: left;
    margin: 0 20px 0 0;
}

/* Bottom Right */
.video-bottom-right .demo-video {
    float: right;
    margin: 20px 0 0 20px;
}

/* Bottom Left */
.video-bottom-left .demo-video {
    float: left;
    margin: 20px 20px 0 0;
}

video::cue {
    color: yellow;              /* text color */
    font-size: 1.5em;           /* larger font */
    font-family: "Arial", sans-serif;
    background: rgba(0,0,0,0.5); /* semi-transparent background */
    text-align: center;
}

.video-row::after {
    content: "";
    display: block;
    clear: both;
}


    .standard-row p img {
        max-width: 400px;   /* never exceed 400px */
        width: 100%;        /* shrink on small screens */
        height: auto;       /* keep proportions */
    }
    .img-right {
        float: right;
        margin: 0 0 10px 15px;
    }

    .img-left {
        float: left;
        margin: 0 15px 10px 0;
    }

    /* Optional: bottom positioning feel */
    .img-bottom-right {
        float: right;
        margin: 10px 0 0 15px;
    }

    .img-bottom-left {
        float: left;
        margin: 10px 15px 0 0;
    }
    .standard-row p {
       overflow: auto; /* clears floats inside paragraph */
    }

    @media (max-width: 400px) {
    .standard-row p img {
        max-width: 60%;
        width: 60%;
        height: auto;
    }

    .img-left {
        float: left;
        margin: 0 10px 10px 0;
    }

    .img-right {
        float: right;
        margin: 0 0 10px 10px;
    }

    .img-bottom-left {
        float: left;
        margin: 10px 10px 0 0;
    }

    .img-bottom-right {
        float: right;
        margin: 10px 0 0 10px;
    }
}
    @media (max-width: 650px) {
        .standard-row p img {
            max-width: 250px; /* shrink images sooner */
        }
    }