Сетка переполнения меток радиоизображений ⇐ CSS

[Anonymous]

Новичок в CSS и не могу понять, как динамически изменять высоту миниатюр, чтобы они не переполняли голубой контейнер.
[img]https: //i.sstatic.net/trkj8Tpy.png[/img]

HTML-код предназначен для сетки самого большого размера с 25 элементами. Во всех остальных категориях меньше.

Код: Выделить всё

.course-container {
display: grid;
max-height: 5fr;
width: 5fr;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5,1fr);
background-color: cyan;
margin: auto;
padding: 1.5%;
grid-gap: 3%;
justify-content: space-around;
align-items: center;
}

.course-container > div img {
display: block;
max-width: calc(100% - 10px);
max-height: 1fr;
opacity: 80%;
border: 5px solid transparent;

&:hover {
opacity: 100%;
transition: opacity 100ms ease-in-out;
}
}
.course-container input[type=radio]:checked + label >  img {
border: 5px solid salmon;
background-color: salmon;
opacity: 100%;
mask-image: linear-gradient(135deg, transparent 4%, gold 0),
linear-gradient(-135deg, transparent 4%, gold 0),
linear-gradient(45deg, transparent 4%, gold 0),
linear-gradient(-45deg, transparent 4%, gold 0);
mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
mask-repeat: no-repeat;
mask-size:  5 1 %   5 1 % ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e >       & l t ; d i v   c l a s s = " c o u r s e - c o n t a i n e r " & g t ; < b r   / >                                         & l t ; d i v   c l a s s = " c o u r s e - t h u m b n a i l   m k 8 C o u r s e s " & g t ; < b r   / >                                                 & l t ; i n p u t   t y p e = " r a d i o "  name="course-thumbnail" id="Animal-Crossing" value="Animal Crossing"/>

[img]images/courses/Animal-Crossing.png[/img]




[img]images/courses/Big-Blue.png[/img]




[img]images/courses/Bone-Dry-Dunes.png[/img]




[img]images/courses/Bowsers-Castle.png[/img]




[img]images/courses/Cloudtop-Cruise.png[/img]




[img]images/courses/Dolphin-Shoals.png[/img]




[img]images/courses/Dragon-Driftway.png[/img]




[img]images/courses/Electrodome.png[/img]




[img]images/courses/Excitebike-Arena.png[/img]




[img]images/courses/Hyrule-Circuit.png[/img]




[img]images/courses/Ice-Ice-Outpost.png[/img]




[img]images/courses/Mario-Circuit-MK8.png[/img]




[img]images/courses/Mario-Kart-Stadium.png[/img]




[img]images/courses/Mount-Wario.png[/img]




[img]images/courses/Mute-City.png[/img]




[img]images/courses/Rainbow-Road-MK8.png[/img]




[img]images/courses/Shy-Guy-Falls.png[/img]




[img]images/courses/Sunshine-Airport.png[/img]




[img]images/courses/Super-Bell-Subway.png[/img]




[img]images/courses/Sweet-Sweet-Canyon.png[/img]




[img]images/courses/Thwomp-Ruins.png[/img]




[img]images/courses/Toad-Harbor.png[/img]




[img]images/courses/Twisted-Mansion.png[/img]




[img]images/courses/Water-Park.png[/img]




[img]images/courses/Wild-Woods.png[/img]

Вот ссылка на репозиторий GitHub на случай, если вы захотите изучить полный код.

Подробнее здесь: https://stackoverflow.com/questions/785 ... rflow-grid