/* =============================================================================
   SPACING UTILITIES - MHB Theme
   Classes utilitaires centralisées pour padding/margin bottom
   ============================================================================= */

/* =============================================================================
   PADDING BOTTOM
   ============================================================================= */

.mhb-pb-none {
    padding-bottom: 0 !important;
}

.mhb-pb-small {
    padding-bottom: 20px !important;
}

.mhb-pb-mid {
    padding-bottom: 40px !important;
}

.mhb-pb-large {
    padding-bottom: 60px !important;
}

.mhb-pb-xlarge {
    padding-bottom: 100px !important;
}

.mhb-pb-xxlarge {
    padding-bottom: 140px !important;
}

/* =============================================================================
   MARGIN BOTTOM
   ============================================================================= */

.mhb-mb-none {
    margin-bottom: 0 !important;
}

.mhb-mb-small {
    margin-bottom: 20px !important;
}

.mhb-mb-mid {
    margin-bottom: 40px !important;
}

.mhb-mb-large {
    margin-bottom: 60px !important;
}

.mhb-mb-xlarge {
    margin-bottom: 100px !important;
}

.mhb-mb-xxlarge {
    margin-bottom: 140px !important;
}

/* =============================================================================
   RESPONSIVE - 1024px (Tablet)
   ============================================================================= */

@media (max-width: 1024px) {
    /* Padding bottom */
    .mhb-pb-small {
        padding-bottom: 15px !important;
    }

    .mhb-pb-mid {
        padding-bottom: 30px !important;
    }

    .mhb-pb-large {
        padding-bottom: 45px !important;
    }

    .mhb-pb-xlarge {
        padding-bottom: 75px !important;
    }

    .mhb-pb-xxlarge {
        padding-bottom: 100px !important;
    }

    /* Margin bottom */
    .mhb-mb-small {
        margin-bottom: 15px !important;
    }

    .mhb-mb-mid {
        margin-bottom: 30px !important;
    }

    .mhb-mb-large {
        margin-bottom: 45px !important;
    }

    .mhb-mb-xlarge {
        margin-bottom: 75px !important;
    }

    .mhb-mb-xxlarge {
        margin-bottom: 100px !important;
    }
}

/* =============================================================================
   RESPONSIVE - 768px (Mobile landscape)
   ============================================================================= */

@media (max-width: 768px) {
    /* Padding bottom */
    .mhb-pb-small {
        padding-bottom: 12px !important;
    }

    .mhb-pb-mid {
        padding-bottom: 25px !important;
    }

    .mhb-pb-large {
        padding-bottom: 35px !important;
    }

    .mhb-pb-xlarge {
        padding-bottom: 55px !important;
    }

    .mhb-pb-xxlarge {
        padding-bottom: 75px !important;
    }

    /* Margin bottom */
    .mhb-mb-small {
        margin-bottom: 12px !important;
    }

    .mhb-mb-mid {
        margin-bottom: 25px !important;
    }

    .mhb-mb-large {
        margin-bottom: 35px !important;
    }

    .mhb-mb-xlarge {
        margin-bottom: 55px !important;
    }

    .mhb-mb-xxlarge {
        margin-bottom: 75px !important;
    }
}

/* =============================================================================
   RESPONSIVE - 480px (Mobile portrait)
   ============================================================================= */

@media (max-width: 480px) {
    /* Padding bottom */
    .mhb-pb-small {
        padding-bottom: 10px !important;
    }

    .mhb-pb-mid {
        padding-bottom: 20px !important;
    }

    .mhb-pb-large {
        padding-bottom: 30px !important;
    }

    .mhb-pb-xlarge {
        padding-bottom: 40px !important;
    }

    .mhb-pb-xxlarge {
        padding-bottom: 55px !important;
    }

    /* Margin bottom */
    .mhb-mb-small {
        margin-bottom: 10px !important;
    }

    .mhb-mb-mid {
        margin-bottom: 20px !important;
    }

    .mhb-mb-large {
        margin-bottom: 30px !important;
    }

    .mhb-mb-xlarge {
        margin-bottom: 40px !important;
    }

    .mhb-mb-xxlarge {
        margin-bottom: 55px !important;
    }
}