/* ========================================
   Header Padding X (Responsive)
   Horizontal padding classes for headlines
   Independent padding for Mobile, Tablet, Desktop
   ======================================== */

/* Mobile Padding (Base Styles) */
.header-px-mobile-0-5 { padding-left: 0.5rem; padding-right: 0.5rem; }
.header-px-mobile-1 { padding-left: 1rem; padding-right: 1rem; }
.header-px-mobile-1-5 { padding-left: 1.5rem; padding-right: 1.5rem; }
.header-px-mobile-2 { padding-left: 2rem; padding-right: 2rem; }
.header-px-mobile-2-5 { padding-left: 2.5rem; padding-right: 2.5rem; }
.header-px-mobile-3 { padding-left: 3rem; padding-right: 3rem; }
.header-px-mobile-3-5 { padding-left: 3.5rem; padding-right: 3.5rem; }
.header-px-mobile-4 { padding-left: 4rem; padding-right: 4rem; }
.header-px-mobile-4-5 { padding-left: 4.5rem; padding-right: 4.5rem; }
.header-px-mobile-5 { padding-left: 5rem; padding-right: 5rem; }
.header-px-mobile-5-5 { padding-left: 5.5rem; padding-right: 5.5rem; }
.header-px-mobile-6 { padding-left: 6rem; padding-right: 6rem; }
.header-px-mobile-6-5 { padding-left: 6.5rem; padding-right: 6.5rem; }
.header-px-mobile-7 { padding-left: 7rem; padding-right: 7rem; }
.header-px-mobile-7-5 { padding-left: 7.5rem; padding-right: 7.5rem; }
.header-px-mobile-8 { padding-left: 8rem; padding-right: 8rem; }
.header-px-mobile-8-5 { padding-left: 8.5rem; padding-right: 8.5rem; }
.header-px-mobile-9 { padding-left: 9rem; padding-right: 9rem; }
.header-px-mobile-9-5 { padding-left: 9.5rem; padding-right: 9.5rem; }
.header-px-mobile-10 { padding-left: 10rem; padding-right: 10rem; }
.header-px-mobile-10-5 { padding-left: 10.5rem; padding-right: 10.5rem; }
.header-px-mobile-11 { padding-left: 11rem; padding-right: 11rem; }
.header-px-mobile-11-5 { padding-left: 11.5rem; padding-right: 11.5rem; }
.header-px-mobile-12 { padding-left: 12rem; padding-right: 12rem; }

/* Tablet Padding (≥ 768px) */
@media (min-width: 768px) {
    .header-px-tablet-0-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .header-px-tablet-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .header-px-tablet-1-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .header-px-tablet-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .header-px-tablet-2-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
    .header-px-tablet-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
    .header-px-tablet-3-5 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
    .header-px-tablet-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .header-px-tablet-4-5 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
    .header-px-tablet-5 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .header-px-tablet-5-5 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
    .header-px-tablet-6 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .header-px-tablet-6-5 { padding-left: 6.5rem !important; padding-right: 6.5rem !important; }
    .header-px-tablet-7 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .header-px-tablet-7-5 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
    .header-px-tablet-8 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .header-px-tablet-8-5 { padding-left: 8.5rem !important; padding-right: 8.5rem !important; }
    .header-px-tablet-9 { padding-left: 9rem !important; padding-right: 9rem !important; }
    .header-px-tablet-9-5 { padding-left: 9.5rem !important; padding-right: 9.5rem !important; }
    .header-px-tablet-10 { padding-left: 10rem !important; padding-right: 10rem !important; }
    .header-px-tablet-10-5 { padding-left: 10.5rem !important; padding-right: 10.5rem !important; }
    .header-px-tablet-11 { padding-left: 11rem !important; padding-right: 11rem !important; }
    .header-px-tablet-11-5 { padding-left: 11.5rem !important; padding-right: 11.5rem !important; }
    .header-px-tablet-12 { padding-left: 12rem !important; padding-right: 12rem !important; }
}

/* Desktop Padding (≥ 1200px) */
@media (min-width: 1200px) {
    .header-px-desktop-0-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .header-px-desktop-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .header-px-desktop-1-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .header-px-desktop-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .header-px-desktop-2-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
    .header-px-desktop-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
    .header-px-desktop-3-5 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
    .header-px-desktop-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .header-px-desktop-4-5 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
    .header-px-desktop-5 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .header-px-desktop-5-5 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
    .header-px-desktop-6 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .header-px-desktop-6-5 { padding-left: 6.5rem !important; padding-right: 6.5rem !important; }
    .header-px-desktop-7 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .header-px-desktop-7-5 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
    .header-px-desktop-8 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .header-px-desktop-8-5 { padding-left: 8.5rem !important; padding-right: 8.5rem !important; }
    .header-px-desktop-9 { padding-left: 9rem !important; padding-right: 9rem !important; }
    .header-px-desktop-9-5 { padding-left: 9.5rem !important; padding-right: 9.5rem !important; }
    .header-px-desktop-10 { padding-left: 10rem !important; padding-right: 10rem !important; }
    .header-px-desktop-10-5 { padding-left: 10.5rem !important; padding-right: 10.5rem !important; }
    .header-px-desktop-11 { padding-left: 11rem !important; padding-right: 11rem !important; }
    .header-px-desktop-11-5 { padding-left: 11.5rem !important; padding-right: 11.5rem !important; }
    .header-px-desktop-12 { padding-left: 12rem !important; padding-right: 12rem !important; }
}