article {
    section:not(:last-child) {
        display: flow-root; /*Creates new block formatting afterwards, effectively make section at least as large as contained images with float set*/ 
        p:last-child { /*Otherwise there's 2 margins between sections, one for p, one for h2*/
            margin-bottom: 0px;
        }
    }
    img {
        max-height: 515px;
        max-width: 100%;
        width: auto;

        @media (width <= 500px) {
            display: block;
            margin-inline: auto;
            margin-bottom: 14px;
        }
    }
    @media (width > 500px) {
        .left {
            float: left;
            margin-left: 2px;
            margin-right: 18px;
        }
        .right {
            float: right;
            margin-right: 2px;
            margin-left: 18px;
        }
        img {
            margin-block: 5px;
        }
    }
    .highly_recommended {
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        color: light-dark(rgb(43, 43, 43),rgb(234, 234, 234));
        background-color: light-dark(rgb(211, 211, 211),rgb(75, 75, 75));
        margin-inline: auto;
        @media (width <= 500px) {
            margin-bottom: 16px;
        }
        @media (width > 500px) {
            margin-bottom: 13px;
        }
    }
    .highly_recommended::after {
        content: "Highly Recommended";
    }
}