/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .image-grid-header {
        min-height: 3.4rem;
    }

    .content-header {
        min-height: 2rem;
    }

    .bottom-container > div {
        width: 32%;
        left: 8.2%;
    }
}

@media (max-width: 576px) {
    .nav-bar .left-logo {
        margin-left: 0;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .nav-bar .left-logo {
        margin-left: 30px;
    }

    .nav-bar .right-links {
        margin-right: 30px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .nav-bar .left-logo {
        margin-left: 45px;
    }

    .nav-bar .right-links {
        margin-right: 45px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .image-grid-header {
        min-height: auto !important;
    }
}

/* Custom breakpoints for specific devices */
@media (min-width: 834px) and (orientation: landscape) {
    .image-grid-header {
        min-height: 3.4rem;
    }

    .content-header {
        min-height: 2rem;
    }

    .bottom-container > div {
        width: 32%;
        left: 8.2%;
    }
}

@media (min-width: 1195px) and (max-width: 1376px) and (orientation: landscape) {
    .image-grid-header {
        min-height: 3.4rem;
    }
}

@media (min-width: 768px) {
    .badge-img {
        width: 8rem !important;
    }
}

@media (min-width: 992px) {
    .badge-img {
        width: 9rem !important;
    }
}