@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* Background colors */
    --clr_base_100: #F8F7F7;
    --clr_base_200: #F0EEEA;
    --clr_base_300: #d1cfcb;
    
    /* Shaded colors, use for notes and disabled items */
    --clr_base_400: #b2b2b2;
    --clr_base_500: #7a7a7a;

    /* Foreground colors */
    --clr_base_700: #042649;
    --clr_base_800:#132639;
    --clr_base_900: #04121F;

    /* Accent colors */
    --clr_accent_wine: #730D40;
    --clr_accent_blue: #1259A1;

    /* Academy workshop colors */
    --clr_acad_ceramics: #7B6E65;
    --clr_acad_ebanist: #B3422D;
    --clr_acad_enamels: #11783C;
    --clr_acad_stamping: #5A579C;
    --clr_acad_jewelry: #935F15;
    --clr_acad_metals: #5B6B7B;
    --clr_acad_textiles: #B51E82;
    --clr_acad_glass: #0A767F;

    /* Opacity colors */
    --clr_base_800_80: #132639cc;

    --clr_acad_ceramics_op: #7B6E65D2;
    --clr_acad_ebanist_op: #B3422DD2;
    --clr_acad_enamels_op: #11783CD2;
    --clr_acad_stamping_op: #5A579CD2;
    --clr_acad_jewelry_op: #935F15D2;
    --clr_acad_metals_op: #5B6B7BD2;
    --clr_acad_textiles_op: #B51E82D2;
    --clr_acad_glass_op: #0A767FD2;
}









/* ------- NORMALIZATION ------- */
/* Global style normalization */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
*, *::after, *::before {box-sizing: border-box;}

/* Browser specific normalizations */
/* IE */
main {display: block;}

/* Spacing, padding and margin normalization */
body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea, small, hr {
    margin: 0rem;
    padding: 0rem;
}

/* Color and decoration normalization */
a {background-color: transparent;}
img {border-style: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; appearance: button;}

/* Font normalization */
b, strong {font-weight: bolder;}
small {font-size: 0.9rem;}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea {
    font-weight: 400;
    line-height: 130%;
}
body, nav, header, footer, div, section, img, button, a, p, li, ul, ol, label, input, optgroup, select, textarea {
    font-size: 1rem;
}









/* ------- CORE STYLING ------- */
section, div, body, img, button, h1, h2, h3, h4, h5, h6, p, a, li {
    font-family: "Montserrat", Verdana, Arial, sans-serif;
    line-height: 130%;
    cursor: default;
}

body {
    background-color: var(--clr_base_100);
    color: var(--clr_base_900);
}

h1{font-weight: 600;}

h2 {
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    padding-bottom: 1rem;
}

h3 {
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
}

a {
    color: var(--clr_base_900);
    text-decoration: none;
    cursor: pointer;
}

ol {
    list-style-position: outside;
    list-style-type: disc;
    padding-left: 1rem;
}

li {
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.art-anchor-acads {
    display: block;
    position: relative;
    top: -7rem;
    visibility: hidden;
}

.art-anchor-acads-first {
    display: block;
    position: relative;
    top: -5rem;
    visibility: hidden;
}









/* Global container styling */
.cont-root {
    width: min(90%, 90rem);
    margin-inline: auto;
    position: relative;
}

.cont-thick {
    width: min(95%, 120rem);
    margin-inline: auto;
    position: relative;
}

.cont-thick-ext {
    /* This container will expand to full width when the screen with is lower than 1400px */
    width: min(95%, 120rem);
    margin-inline: auto;
    position: relative;
}

.cont-thinish {
    width: min(80%, 70rem);
    margin-inline: auto;
    position: relative;
}

.cont-thin {
    width: min(70%, 50rem);
    margin-inline: auto;
    position: relative;
}

.cont-grid-6 {
    width: 100%;
    margin-inline: auto;

    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(6, 1fr);
}

.cont-grid-4 {
    width: 100%;
    margin-inline: auto;

    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.cont-grid-3 {
    width: 100%;
    margin-inline: auto;

    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(3, 1fr);
}

.cont-grid-2 {
    width: 100%;
    margin-inline: auto;

    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(2, 1fr);
}

.cont-flex-100 {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
}
.cont-flex-100 img {height: auto;}

.cont-flex-row {
    display: flex;
    flex-direction: row;
}









/* Academy workshop page's modal containers */
/* Styles the overlay in wich the academy's pieces are displayed, like a gallery of sorts */
#modal {
    height: 95vh;
    height: 95svh;
    width: 95vw;
    
    background-color: transparent;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0rem;
    border-style: none;
    outline: none;
}
#modal::backdrop {
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(0.3rem);
}

#modal img {
    max-height: 100%;
    max-width: 100%;
}









/* Layered card styling */
.card-layered {
    display: block;
    position: relative;
    border: 0rem;
    overflow: hidden;
    padding: 1rem;
    transition: all 300ms ease-in;
}

.card-layered:hover, .card-layered:focus-visible {transform: scale(1.05);}

.card-layered-overlay {
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 100%;
    width: 100%;

    filter: opacity(0);
    transition: all 300ms ease-in-out;

    cursor: pointer;
}

.card-layered-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 4.5rem;
    width: 100%;
    bottom: 0rem;
    right: 0rem;
    padding-inline: 1rem;

    background-color:rgba(255, 255, 255, 80%);
    color: var(--clr_base_900);
    text-decoration: none;
    text-align: center;
    font-weight: 500;

    -webkit-backdrop-filter: blur(0.5rem) brightness(95%);
    backdrop-filter: blur(0.5rem) brightness(95%);
    transform: scale(1.01);

    cursor: pointer;
}

.card-layered:hover .card-layered-overlay, .card-layered:focus-visible .card-layered-overlay {
    filter: opacity(1);
}









/* Button styling */
.btn {
    padding: 1em 2em 1em 2em;
    border-style: none;
    border-radius: 0.3rem;

    background-color: var(--clr_base_800);
    color: var(--clr_base_100);

    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: auto;
    transition: all 100ms;
}
.btn:hover, .btn:focus-visible {
    background-color: var(--clr_accent_wine);
    color: var(--clr_base_100);
    text-decoration: none;
    outline: none;
}



.btn-inv {
    padding: 1em 2em 1em 2em;
    border-style: none;
    border-radius: 0.3rem;

    background-color: var(--clr_accent_wine);
    color: var(--clr_base_100);

    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: auto;

    transition: all 100ms;
}
.btn-inv:hover, .btn-inv:focus-visible {
    background-color: var(--clr_base_100);
    color: var(--clr_base_900);
    text-decoration: none;
    outline: none;
}



.btn-white {
    padding: 1em 2em 1em 2em;
    border-style: none;
    border-radius: 0.3rem;

    background-color: var(--clr_base_100);
    color: var(--clr_base_900);

    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: auto;

    transition: all 100ms;
}
.btn-white:hover, .btn-white:focus-visible {
    background-color: var(--clr_accent_wine);
    color: var(--clr_base_100);
    text-decoration: none;
    outline: none;
}



.btn-underline {
    text-decoration: none;
}
.btn-underline:hover, .btn-underline:focus-visible {
    text-decoration: underline;
}









/* Utility styling */
.utils-pad-top15 {padding-top: 15rem;}
.utils-pad-top10 {padding-top: 10rem;}
.utils-pad-top7 {padding-top: 7rem;}
.utils-pad-top5 {padding-top: 5rem;}
.utils-pad-top3 {padding-top: 3rem;}
.utils-pad-top2 {padding-top: 2rem;}
.utils-pad-top1 {padding-top: 1rem;}

.utils-pad-bot15 {padding-bottom: 15rem;}
.utils-pad-bot10 {padding-bottom: 10rem;}
.utils-pad-bot7 {padding-bottom: 7rem;}
.utils-pad-bot5 {padding-bottom: 5rem;}
.utils-pad-bot3 {padding-bottom: 3rem;}
.utils-pad-bot2 {padding-bottom: 2rem;}
.utils-pad-bot1 {padding-bottom: 1rem;}

.utils-pad-lef5 {padding-left: 5rem;}
.utils-pad-rig5 {padding-right: 5rem;}

.utils-pad-1 {padding: 1rem;}



/* THIS CLASSES MUST BE PURGED */
.art-copy-header {font-size: 3rem;}

.art-copy-body-xxl {font-size: 1.8rem;}

.art-copy-weight-light {font-weight: 100;}
.art-copy-weight-semilight {font-weight: 300;}
.art-copy-weight-regular {font-weight: 400;}
.art-copy-weight-medium {font-weight: 500;}
.art-copy-weight-bold {font-weight: 800;}
.art-copy-weight-black {font-weight: 900;}

.art-copy-regular {color: var(--clr_base_900);}
.art-copy-shaded-inverted {color: var(--clr_base_400);}

.art-copy-align-center {text-align: center !important;}



.art-item-static-10r {
    max-width: 10rem;
    max-height: 10rem;
}

.art-item-bg-dark {
    background-color: var(--clr_base_800);
    color: var(--clr_base_100);
}
.art-item-bg-dark-darker {
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
}
.art-item-bg-bright-shaded {background-color: var(--clr_base_200);}

.art-item-bg-ceramic {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_ceramics)
    );
}
.art-item-bg-ebanist {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_ebanist)
    );
}
.art-item-bg-enamel {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_enamels)
    );
}
.art-item-bg-stamping {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_stamping)
    );
}
.art-item-bg-jewelry {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_jewelry)
    );
}
.art-item-bg-metallic {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_metals)
    );
}
.art-item-bg-textil {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_textiles)
    );
}
.art-item-bg-glass {
    background: linear-gradient(
        var(--clr_base_800),
        80%,
        var(--clr_acad_glass)
    );
}

.art-item-bg-ceramic-solid {background-color: var(--clr_acad_ceramics);}
.art-item-bg-ebanist-solid {background-color: var(--clr_acad_ebanist);}
.art-item-bg-enamel-solid {background-color: var(--clr_acad_enamels);}
.art-item-bg-stamping-solid {background-color: var(--clr_acad_stamping);}
.art-item-bg-jewelry-solid {background-color: var(--clr_acad_jewelry);}
.art-item-bg-metallic-solid {background-color: var(--clr_acad_metals);}
.art-item-bg-textil-solid {background-color: var(--clr_acad_textiles);}
.art-item-bg-glass-solid {background-color: var(--clr_acad_glass);}

.art-item-fg-ceramic {color: var(--clr_acad_ceramics);}
.art-item-fg-ebanist {color: var(--clr_acad_ebanist);}
.art-item-fg-enamel {color: var(--clr_acad_enamels);}
.art-item-fg-stamping {color: var(--clr_acad_stamping);}
.art-item-fg-jewelry {color: var(--clr_acad_jewelry);}
.art-item-fg-metallic {color: var(--clr_acad_metals);}
.art-item-fg-textil {color: var(--clr_acad_textiles);}
.art-item-fg-glass {color: var(--clr_acad_glass);}

.art-item-height-auto {height: auto;}
.art-item-hidden {
    height: 0rem !important;
    filter: opacity(0) !important;
    overflow: hidden;
}









/*
    Even though this section relates to academy styling, the provided class and selectors are used by:
    - academy's home
    - academy workshop pages
    - 404 error page
*/
#acad_home_career {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#acad_home_career > div > div {
    display: flex;
    flex-direction: column;
    position: relative;
}

#acad_home_career > div > div > div {
    position: absolute;
    top: 2rem;
    left: 0rem;
    width: 100%;
    height: 20rem;
    
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--clr_base_800);
    backdrop-filter: blur(0.25rem);
    opacity: 0;

    transition: opacity 200ms;
}

#acad_home_career > div > div > div img {
    margin-top: 0rem;
    height: 60%;
    aspect-ratio: 1/1;
}

#acad_home_career > div > div > img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    margin-top: 2rem;
}

#acad_home_career h3 {
    text-align: left;
    font-size: 1.75rem;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
}

#acad_home_career h3 + p{
    font-weight: 500;
    font-size: 1.1rem;
}

#acad_home_career > div p {padding-bottom: 2rem;}

#acad_home_career a {
    margin-inline-end: 0rem;
    margin-bottom: 0rem;
}

#acad_home_career a:hover ~ div, #acad_home_career a:focus-visible ~ div {opacity: 1;}

#acad_home_career h2 + p {
    text-align: center;
    padding-bottom: 2rem;
}



@media (max-width: 1200px) {
    #acad_home_career > div {grid-template-columns: repeat(2, 1fr);}
    #acad_home_career > div > div > div {height: 15rem;}
    #acad_home_career > div > div > img {height: 15rem;}
}



@media (max-width: 768px) {
    #acad_home_career > div {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }
}



@media (max-width: 576px) {
    #acad_home_career h3 {font-size: 1.5rem;}
    #acad_home_career h3 + p {font-size: 1rem;}
    #acad_home_career > div p {padding-bottom: 1rem;}
}









/* Style the header navbar */
.nav_hidden {
    display: none;
    position: absolute;
}

nav {
    width: 100%;
    height: 3rem;
    
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
    
    position: fixed;
    z-index: 10;
    top: 0rem;
}

nav > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#art_nav_c1, #art_nav_c2 {
    display: flex;
    flex-direction: row;
}

#art_nav_c1 a, #art_nav_c1 img {
    text-decoration: none;
    font-size: 0.9rem;

    height: 3rem;
    width: auto;
    display: flex;
    align-items: center;

    color: var(--clr_base_100);
    cursor: pointer;
}

#art_nav_c1 a:nth-child(2) {padding-inline: 1rem;}

#art_nav_c1 a:focus-visible {
    outline: 3px solid var(--clr_base_100);
    outline-offset: -2px;
}

#art_nav_c2 a {
    text-decoration: none;
    font-size: 0.9rem;
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);

    height: 3rem;
    display: flex;
    align-items: center;

    padding-inline: 0.75rem;
}

#art_nav_c2 a:hover, #art_nav_c2 div.nav_dropdown:hover > a,
#art_nav_c2 a:focus-visible, #art_nav_ce div.nav_dropdown:focus-visible > a {
    background-color: var(--clr_base_100);
    color: var(--clr_base_900);
    outline: none;
}

#art_nav_c2 div.nav_dropdown:hover div.nav_hidden {display: block;}

#art_nav_c2 .nav_hidden {background-color: var(--clr_base_800);}

#art_nav_c2 .nav_hidden > a {
    height: 2.75rem;
    padding-inline: 1.5rem;
}

#art_nav_c2 .nav_hidden > a:hover {
    background-color: var(--clr_base_700);
    color: var(--clr_base_100);
}

#art_nav_c3 {
    display: none;
    flex-direction: row;
    align-items: center;
}

nav button {
    font-size: 0.9rem;
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
    border-style: solid;
    border-color: var(--clr_base_400);
    border-width: 1px;
    border-radius: 0.5rem;

    height: 2rem;
    display: flex;
    align-items: center;

    padding-inline: 0.75rem;
}

nav button:hover, nav button:focus-visible {
    background-color: var(--clr_base_100);
    color: var(--clr_base_900);
    outline: none;
}

#art_nav_c31 {
    position: absolute;
    top: 3rem;
    left: 0rem;
    width: 100%;
    height: 0rem;

    background-color: var(--clr_base_900);
    color: var(--clr_base_100);

    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    transition: all 300ms ease-out;
}

#art_nav_c31 a {
    padding-inline: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;

    text-decoration: none;
    font-size: 0.9rem;
    color: var(--clr_base_100);
}

#art_nav_c31 a:hover, #art_nav_c31 a:focus-visible {
    background-color: var(--clr_base_100);
    color: var(--clr_base_900);
    outline: none;
}

#art_nav_c31 > a:nth-child(1) {
    border-top: solid 2px var(--clr_base_200);
}

#art_nav_c31 > a:nth-child(n+1) {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

#art_nav_c31 > a:nth-child(1) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#art_nav_c31 > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0rem;
    padding-bottom: 1rem;
    border-bottom: solid 2px var(--clr_base_700);
}

#art_nav_c31 > div > a {
    padding-inline-start: 3rem;
}

#art_nav_c31 > div:last-child {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    padding-top: 2rem;
    padding-bottom: 2rem;
}

#art_nav_c31 > div:last-child > a, #art_nav_c31 > div:last-child img {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    padding: 0rem;
    margin-inline-start: 1.5rem;
    cursor: pointer;
}

#art_nav_c31 > div:last-child img {
    margin-inline-start: 0rem;
}

#art_nav_c31 > div:last-child > a:hover, #art_nav_c31 > div:last-child > a:focus-visible {
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
    outline: none;
}



@media (max-width: 992px) {
    #art_nav_c2 {display: none;}
    #art_nav_c3 {display: flex;}
}









/* Style the footer */
footer {
    padding-top: 3rem;
    padding-bottom: 2rem;
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
    border-top: solid 1px var(--clr_base_200);
}

footer h3 {
    font-size: 1.2rem;
    text-align: left;
    padding-bottom: 0.3rem;
}
footer > div > h3:nth-child(1) {text-align: center;}

footer a {
    display: block;
    color: var(--clr_base_100);
}

footer > div > a:nth-child(2) {
    text-align: center;
    margin-bottom: 2.5rem;
    width: fit-content;
    margin-inline: auto;
}

footer h3 > a {
    font-weight: 600;
    margin-top: 0.5rem;
}

footer a, footer p {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

footer a:hover, #art_footer a:focus-visible {
    text-decoration: underline;
    outline: none;
}

footer > div > div > div:nth-child(4) > a:nth-child(n+5) {
    display: inline-block;
    margin-inline-end: 1rem;
    margin-top: 1rem;
}

footer img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

#art_inbal {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
}

#art_inbal p {padding-bottom: 0.5rem;}

#art_inbal img {
    width: min(40%, 50rem);
    height: auto;
    margin-inline: auto;
    cursor: pointer;
}



@media (max-width: 768px) {
    footer .cont-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    #art_inbal img {width: 90%;}
}



@media (max-width: 576px) {
    footer .cont-grid-4 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
    footer h3 {text-align: center;}
    footer > div > div > div:nth-child(4) > a:nth-child(n+6) {margin-inline-end: 0rem;}

    #art_inbal {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}









/* Style the 404 page */
#error_404 {
    padding-top: 7rem;
    padding-bottom: 2rem;
    text-align: center;
}

#error_404 h1 {
    font-size: 15rem;
    font-weight: 100;
    padding-bottom: 3rem;
}

#error_404 p {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 140%;
    padding-bottom: 2rem;
}

#error_404 p > a {
    font-size: 1.5rem;
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}



@media (min-width: 1950px) {
    #error_404 {padding-top: 10rem;}
}
@media (max-width: 1200px) {
    #error_404 h1 {font-size: 10rem;}
}
@media (max-width: 576px) {
    #error_404 h1 {font-size: 7.5rem;}
    
    #error_404 p, #error_404 p > a {
        font-size: 1.15rem;
        font-weight: 400;
    }
}









/* Respoonsive styling */
/* 4k display */
@media (min-width: 1950px) {
    .cont-root {width: min(90%, 105rem);}
}



/* Windowed browser */
@media (max-width: 1400px) {
    .cont-thick-ext {width: 100%;}
    .cont-grid-6 {grid-template-columns: repeat(4, 1fr);}

    .utils-pad-top10 {padding-top: 7rem;}
    .utils-pad-bot10 {padding-bottom: 7rem;}

}



/* Windowed browser */
@media (max-width: 1200px) {
    .cont-grid-6 {grid-template-columns: repeat(3, 1fr);}
    .cont-grid-4 {grid-template-columns: repeat(3, 1fr);}

    .utils-pad-top10 {padding-top: 5rem;}
    .utils-pad-bot10 {padding-bottom: 5rem;}

}



/* Horizontal tablet display */
@media (max-width: 992px) {
    .cont-root {width: 90%;}
    
    .cont-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1rem;
    }

    .utils-pad-bot10 {padding-bottom: 3rem;}

    .art-copy-header {font-size: 2rem;}

    .art-copy-body-xxl {font-size: 1.5rem;}
}



/* Vertical tablet / Horizontal mobile display */
@media (max-width: 768px) {
    .cont-thinish {width: 90%;}
    .cont-thin {width: 90%;}
    
    .art-tablet-hidden {display: none !important;}
    .art-tablet-copy-left {text-align: left !important;}
}



/* Vertical mobile display */
@media (max-width: 576px) {
    h2 {font-size: 2rem;}

    .cont-thinish {width: 100%;}
    .cont-thin {width: 100%;}
    .cont-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1rem;
    }
    .cont-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1rem;
    }
    .cont-grid-3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .cont-grid-2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .art-copy-body-xxl {font-size: 1.25rem;}
    
    .art-mobile-hidden {display: none;}
    .art-mobile-stripe {height: 10rem;}
    .art-mobile-copy-center {text-align: center;}
    .art-mobile-copy-left {text-align: left !important;}
    .art-mobile-padding-bottom-3r {padding-bottom: 3rem;}
}









/* --------- A11Y STYLING ------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}









@media (min-width: 1950px) {}
@media (max-width: 1400px) {}
@media (max-width: 1200px) {}
@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}
@media (max-width: 400px) {}