/*
 * local_jangrofrontpageui styles.
 *
 * Confirmed via the theme's actual served/compiled CSS bundle (not just
 * the template source, which doesn't show the responsive breakpoint
 * rules): .coursebox .content .courseimage gets a fixed width/height per
 * breakpoint (e.g. 325x225 - ratio ~1.44:1) with background-size:cover.
 * Real course overview images on this site are consistently 560x150
 * (ratio ~3.73:1, confirmed via get_imageinfo() across every course
 * overviewfiles record) - cover-fitting that much wider/shorter image into
 * a ~1.44:1 box crops away most of its width.
 *
 * Fix: let the theme's own responsive width rules keep deciding how wide
 * the box is at each breakpoint, but override the height to be computed
 * from an aspect-ratio matching the real images instead of a fixed value -
 * background-size:cover then has a box shaped like the actual image, so it
 * fills it with only a small, even crop instead of a severe one.
 */
.coursebox .content .courseimage {
    height: auto !important;
    aspect-ratio: 560 / 150 !important;
    background-size: cover !important;
    background-position: center !important;
}