/****************** Bootstrap overrides ***********************/

@media (max-width: 1199px) {
    .form-horizontal .control-label {
        text-align: left;
        margin-bottom: .5ex;
    } 
}
@media (min-width: 1200px) {
    .form-horizontal .control-label {
        text-align: right;
    } 
    
}

.form-horizontal .checkbox {
    padding-left: calc(20px + 1ex);
}

.form-horizontal div.checkbox input[type="checkbox"] {
    margin: 0px 0px 0px calc(-20px - 1ex);
    padding-top: 7px;
}

.form-horizontal div.checkbox label span::before {
   content: " ";
   margin: 0px .5ex;
}

/**************************************************************/


div#page-content {
    overflow-x: auto;
}

.img-group {
    width: 100%;
    display: flex; 
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.group-image-container { 
    flex-grow: 1;
    height: 30vh;
}

.group-image-container:first-child:nth-last-child(2),
.group-image-container:first-child:nth-last-child(2) ~ .group-image-container {
    /* only two items */
    height: 30vh;
}

.group-image-container:only-of-type { 
    padding: 0px 20%;
    height: 30vh;
}

img.group-image {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

@media (max-width: 575px) {
    .group-image-container:only-of-type { 
        min-width: 100%;
        padding: 0px;
    }
}

@media (min-width: 576px) and (max-width: 768px) and (max-aspect-ratio: 1/1) {
    .group-image-container:only-of-type { 
        padding: 0px 10%;
        max-height: 40vh;
    }
    
}
@media (min-width: 576px) and (max-width: 768px) and (min-aspect-ratio: 1/1) {
    /* landscape mode */

    .group-image-container:only-of-type { 
        padding: 0px 20%;
        height: 50vh;
    }

    .group-image-container:first-child:nth-last-child(2),
    .group-image-container:first-child:nth-last-child(2) ~ .group-image-container {
        /* only two items */
        height: 50vh;
    }
    
    .group-image-container { 
        height: 40vh;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .group-image-container:only-of-type { 
        max-height: 40vh;
        padding: 0px 10%;
    }
}