h2 {
    counter-reset: chapters;
}

h3 {
    counter-reset: sections;
}

h3:before {
    content: counter(chapters, upper-roman)".\a0";
    counter-increment: chapters;
}

h4:before {
    content: counter(sections, arabic)".\a0";
    counter-increment: sections;
}

:has(> .btn-group) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.btn-group {
    margin-left: 1em;
}

.btn-group .btn:first-child:not([class*="btn-outline-"]) {
    /* border-left: 0 !important; */
    margin-left: 0 !important;
}

.btn-group .btn:not([class*="btn-outline-"]) {
    /* border-left: 2px solid !important; */
    margin-left: 1px !important;
}

.card-img {
    opacity: 0.25;
    min-height: 9em;
    max-height: 8vw;
    object-fit: cover;
}

.card-body:first-child {
    /* border-top: inherit; */
    /* border-bottom: inherit; */
}

.card .list-group {
    border: 0px;
}

/* Breakpoint md of Bootstrap. */
@media screen and (max-width: 767.98px) {
    /* Handle wrapping buttons in button groups (and fixing round corners).
     * However this is not perfect, of course I cannot really predict when a button group will wrap and need this fix.
     */
    .btn-group {
        flex-wrap: wrap;
        flex-grow: 0;
    }

    .btn-group .btn {
        border-radius: 0 !important;
        margin-left: 0px !important;
        margin-top: -1px !important;
    }

    .btn-group .btn:first-child {
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
    }

    .btn-group .btn:first-child:not([class*="btn-outline-"]) {
        margin-left: 0 !important;
        margin-top: -1px !important;
    }

    .btn-group .btn:not([class*="btn-outline-"]) {
        margin-left: 0 !important;
        margin-top: 1px !important;
    }

    .btn-group .btn:last-child {
        border-bottom-left-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }

    .card-img {
        max-height: 12vw;
    }
}