/* mobile */
@media (max-width: 575px) {
    html {
        scroll-padding-top: 30vw !important;
    }

    .bp-auto-card {
        height: 59.5vw !important;
    }

    .bp-auto-card>h4 {
        font-size: 1.25rem !important;
    }

    .bp-training-btn {
        min-width: 190px !important;
    }

    .mobile-break { display: block; }
}

/* sm */
@media (min-width: 576px) and (max-width: 767px) {
    #bp-logo {
        width: 37vh;
    }
}

/* sm down */
@media (max-width: 576px) {
    #bp-logo {
        width: 75vw !important;
    }

    #bp-header-bg {
        z-index: 0;
        background-color: #1E1C2F;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('/img/bp-HomeBanner-mobile.jpg');
    }

    .navbar-expand-md .navbar-collapse {
        height: auto !important;
    }
}

/* lg down */
@media (max-width: 992px) {
    .bp-auto-card, #bp-logo, #header-text {
        z-index: 2;
        position: relative;
    }

    .bp-auto-card {
        height: 18rem;
        max-width: 13.5rem;
    }

    #bp-header-bg {
        z-index: 0;
        background-color: #1E1C2F;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .mobile-auto-cards {
        background-color: #1E1C2F;
    }
}

/* md */
@media (min-width: 576px) and (max-width: 767px) {
    #bp-header-bg {
        background-image: url('/img/bp-HomeBanner-medium.jpg');
    }

    #bp-logo {
        width: 45vw !important;
    }
}

/* lg down */
@media (max-width: 992px) {
    .two-col-ul {
       columns: 1; 
       -webkit-columns: 1; 
       -moz-columns: 1;
       padding-left: 1rem;
    }

    #bp-logo {
        width: 25vw;
    }
}

/* xl */ 
@media (min-width: 992px) and (max-width: 1200px) {
    .bp-auto-card {
        height: 13rem;
    }

    .bp-circle {
        margin-top: 0rem !important;
    }

    .bp-auto-card>h4 {
        font-size: 1rem !important;
    }

    #desktop-card-row {
        height: 25vw;
    }
}

/* xxl & xl */ 
@media (min-width: 992px) and (max-width: 1450px) {
    .bp-circle {
        height: 6.5rem;
        width: 6.5rem;
    }
    
    .auto-icon {
        height: 3rem;
    }
}

/* xxl */ 
@media (min-width: 1200px) and (max-width: 1450px) {
    .bp-auto-card {
        height: 15rem;
    }

    .bp-auto-card>h4 {
        font-size: 1.25rem !important;
    }

    .bp-circle {
        height: 6.5rem;
        width: 6.5rem;
    }
    
    .auto-icon {
        height: 3rem;
    }
}

/* xl up */ 
@media (min-width: 1200px) {
    .grecaptcha-badge {
        right: -16vw !important;
    }
}