:root {
    --img-max-width: 500px;
    --img-max-height: 300px;
}

/********************** SIRKA RAMECKU **********************/
.frame-small {
    max-width: 650px;
}
.frame-normal {
    max-width: 780px;
}
.frame-large {
    max-width: 900px;
}
.card img {
    --min-width: calc(50vw - 55px);
    max-width: var(--option-img-max-width, --min-width); /* fallback for older browers */
    max-width: min(var(--min-width), var(--option-img-max-width, 100vw));
}
@media screen and (min-width: 650px) {
    .frame-small .card img {
        max-width: var(--option-img-max-width, 270px); /* fallback for older browers */
        max-width: min(var(--option-img-max-width, 100vw), 270px);
    }
}
@media screen and (min-width: 780px) {
    .frame-normal .card img {
        max-width: var(--option-img-max-width, 335px); /* fallback for older browers */
        max-width: min(var(--option-img-max-width, 100vw), 335px);
    }
}
@media screen and (min-width: 900px){
    .frame-large .card img {
        max-width: var(--option-img-max-width, 395px); /* fallback for older browers */
        max-width: min(var(--option-img-max-width, 100vw), 395px);
    }
}
@media screen and (max-width: 649px) {
    .card img {
        max-width: 270px;
    }
}

/********************** QUESTION **********************/
#question-frame {
    border-radius: 3px;
    background-color: white;

    padding: 10px 30px;
    margin: 40px 0 10px;
}

.whiteScreen #question-frame {
    padding: 0 10px;
    margin-top: 20px;
}

#question-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

#question {
    font-size: 28px;
    line-height: 1.3;
}

#question-content {
    margin: 20px 0;
}

#question img {
    cursor: pointer;
}

#question-frame .fmt-image {
    gap: 65px;
}

#question pre {
    font-size: 20px;
}

#options {
    margin-bottom: 20px;
}

/********************** UNDERSCORE SUBSTITUTION **********************/
#exercise .gap {
    display: inline-block;
    border-bottom: 2px solid var(--grayHover);
    background-color: var(--lightGray);
    color: transparent;

    height: 1em;
    line-height: 1ex;
    vertical-align: text-top;
}

#exercise .gap.short {
    width: 1ch;
}
#exercise .gap.long {
    width: 3ch;
}
#exercise .nobreak {
    white-space: nowrap;
}

/********************** CARDS **********************/
.card {
    display: inline-block;
    vertical-align: middle;

    font-size: 26px;

    margin: 10px;
    min-width: 270px;
}

#options.short .card {
    min-width: 150px;
}
.card.fill {
    padding: 10px;
}
.card img {
    max-height: 300px;
    box-sizing: content-box;
}

.card pre {
    font-size: 20px;
    margin: -10px;
}

.card .fmt-image {
    line-height: 0;
    margin: -10px;
}

.card .fmt-image:not(:last-child),
.card pre:not(:last-child) {
    margin-bottom: 10px;
}
.card .fmt-image:not(:first-child),
.card pre:not(:first-child) {
    margin-top: 10px;
}

/********************** MOBILNI VERZE **********************/
@media screen and (max-width: 599px) {
    #question-frame {
        padding: 30px 5px;
    }

    #question-frame .fmt-image.nowrap {
        gap: 10px;
    }
}