* {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Oswald', sans-serif;
}

/* HIDE RADIO */
.redio-image {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.redio-image+img {
    cursor: pointer;
}

/* CHECKED STYLES */
.redio-image:checked+img {
    outline: 2px solid var(--bs-primary);
}

/*
.header-image {
    background-size: 100% 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
}
*/

.header-inner-height {
    height: 30vh;
}

.image-profile {
    width: 100%;
    height: 13rem;
}

.main-image {
    width: 100%;
    height: 17rem;
}

.modal-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.modal-sub-image {
    width: 100%;   
}

/* 993 */
@media screen and (max-width: 993px) {
    .main-image {
        width: 100%;
        height: 12rem;
    }

    .image-profile {
        width: 100%;
        height: 9rem;
    }
}

/* 765 */
@media screen and (max-width: 765px) {
    .main-image {
        width: 100%;
        height: 8rem;
    }

    .image-profile {
        width: 100%;
        height: 7rem;
    }

    .header-inner-height {
        height: 25vh;
    }
}

/* 539 */
@media screen and (max-width: 539px) {
    .font-size-responsive {
        font-size: 1rem !important;
    }

    .font-size-responsive-2 {
        font-size: 1rem !important;
    }

    .image-profile {
        width: 100%;
        height: 6rem;
    }

    .header-inner-height {
        height: 20vh;
    }
}

/* 507 */
@media screen and (max-width: 507px) {
    .font-size-responsive {
        font-size: 0.7rem !important;
    }

    .header-inner-height {
        height: 15vh;
    }
}

/* 437 */
@media screen and (max-width: 437px) {
    .font-size-responsive {
        font-size: 0.5rem !important;
    }

    .font-size-responsive-2 {
        font-size: 0.7rem !important;
    }

    .main-image {
        width: 100%;
        height: 7rem;
    }

    .header-inner-height {
        height: 10vh;
    }
}

/* 395 */
@media screen and (max-width: 395px) {
    .font-size-responsive {
        font-size: 0.5rem !important;
        padding: 10px !important;
    }

    .font-size-responsive-2 {
        font-size: 0.7rem !important;
    }

    .main-image {
        width: 100%;
        height: 5rem;
    }

    .image-profile {
        width: 100%;
        height: 5rem;
    }

    .header-inner-height {
        height: 5vh;
    }
}

/* 360 */
@media screen and (max-width: 360px) {
    .font-size-responsive {
        font-size: 0.5rem !important;
        padding: 4px !important;
    }

    .main-image {
        width: 100%;
        height: 4rem;
    }

    .image-profile {
        width: 100%;
        height: 4rem;
    }
}