/* =========================================================
   ARS HERO — VIEWPORT WIDTH EXPANSION
   HERO CONTAINER ONLY
   DO NOT SCALE / RESIZE GOLD SYSTEM
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.ars-hero {
    width: 100%;
    max-width: none;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   HERO FIELD
   Expand the visual field horizontally
   WITHOUT enlarging the Gold System
   ========================================================= */

.ars-hero-field {
    width: 300vw;
    max-width: none;

    position: relative;

    left: 50%;
    transform: translateX(-50%);

    overflow: visible;
}


/* =========================================================
   GOLD SYSTEM
   IMPORTANT:
   Keep original dimensions.
   Do NOT give it 300vw.
   ========================================================= */

.ars-gold-system {
    width: auto;
    max-width: none;

    position: relative;

    left: auto;
    transform: none;

    overflow: visible;
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

    .ars-hero-field {
        width: 300vw;
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =========================================================
   MOBILE LARGE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .ars-hero-field {
        width: 300vw;
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .ars-hero-field {
        width: 300vw;
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .ars-hero-field {
        width: 300vw;
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =========================================================
   GLOBAL HORIZONTAL SCROLL PROTECTION
   ========================================================= */

html,
body {
    overflow-x: hidden;
}