/**
 * Utility classes Bootstrap does not have. Each one has a user in the exam app
 * (see docs/design-system.md).
 */

/* Measures for the exam's question and results columns */
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }

/* aspect-ratio keeps a lazy-loaded image from collapsing to zero height
   (which would put every image in the viewport and load them all at once);
   "auto" switches to the file's own ratio once it has loaded. */
.result-image {
    max-height: 400px;
    object-fit: contain;
    aspect-ratio: auto 3 / 2;
}

.result-hotspot-image {
    aspect-ratio: auto 3 / 2;
}



/* 3:2 boxes for the catalogue photos (900x600) next to Bootstrap's 4x3/16x9 */
.ratio-3x2 {
    --bs-aspect-ratio: 66.6667%;
}

/* A ratio box that fills its column height from md up (the lesson-bike hero) */
@media (min-width: 768px) {
    .ratio.h-md-100 {
        height: 100%;
    }

    .ratio.h-md-100::before {
        padding-top: 0;
    }
}