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

/********************** 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;
    margin-left: auto;
    margin-right: auto;
}

.translation {
    font-size: 20px;
    color: var(--grayHover);
    margin-top: 15px;
    text-align: center;
}

.topic {
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
}

.topic:empty {
    display: none;
}

/********************** 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;
    text-align: center;
    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;
}

/********************** SCORE **********************/
.score-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    font-size: 16px;
    line-height: 1;

    margin: 30px auto;
    padding: 10px;
    gap: 5px;

    background-color: var(--faintGreen);
    border: 2px solid var(--greenHover);
    border-radius: 6px;
}

.score-value {
    font-size: 2em;
}

.bc-grid {
    width: 100%;

    display: grid;
    grid-template-columns:
            [left] var(--grid-column)
            [middle] minmax(0, auto)
            [right] var(--grid-column);
    justify-items: stretch;
    align-items: center;
    column-gap: 10px;
}

.bc-grid-left {
    grid-column: left / left;
}

.bc-grid-middle {
    grid-column: middle / middle;
}

.bc-grid-right {
    grid-column: right / right;
}

/********************** MOBILNI VERZE **********************/
@media screen and (max-width: 599px) {
    .question-frame {
        padding: 0 10px;
    }

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

    .score-box {
        flex-direction: row;
    }

    .score-label::after {
        content: ':';
    }

    .bc-grid {
        grid-template-columns: auto;
    }

    .bc-grid-left, .bc-grid-middle, .bc-grid-right {
        grid-column: auto;
    }
}