New to CSS and can’t figure out how to dynamically change the heights of the thumbnails so they don’t overflow the cyan container.

CSS

.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: 51% 51%;
}

Here is a link to the GitHub Respository