/* ------------------------------------------------------ */
/* GLOBAL RESET & SCROLLBAR                               */
/* ------------------------------------------------------ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    user-select: none;
}
::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------------ */
/* HTML                                                   */
/* ------------------------------------------------------ */

html {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
}

/* ------------------------------------------------------ */
/* ROOT VARIABLES                                          */
/* ------------------------------------------------------ */

:root {
    /* ----------------------------- */
    /* HEIGHT                         */
    /* ----------------------------- */

    --sidebarWidth: 16rem;
    --headerHeight: 60px;
    --banner-height: 30px;

    /* ----------------------------- */
    /* COLOR SCHEME                   */
    /* ----------------------------- */

    /* Dark shades
    --dark:   #121317;
    --dark-1: #1B1C22;
    --dark-2: #24262E;
    --dark-3: #2D2F39;
    --dark-faded: rgba(45, 47, 57, 0.8);
    --dark-border: rgba(45, 47, 57, 0.7);
*/

    /* Dark Shades 3
    --dark:   #07080a;
    --dark-1: #111318;
    --dark-2: #191C24;
    --dark-3: #212630;
    --dark-faded: rgba(33, 38, 48, 0.5);
    --dark-border: rgba(33, 37, 48, 0.7);
*/

    /* Dark shades 2 */
    --dark:   #131315;
    --dark-1: #1D1D20;
    --dark-2: #27272B;
    --dark-3: #303036;
    --dark-faded: rgba(48, 48, 54, 0.5);
    --dark-border: rgba(48, 48, 54, 0.5);


    /* Light shades */
    --light:   #F3F4F7;
    --light-1: #E7E9EF;
    --light-2: #DADDE7;
    --lightBorder: #F3F4F7;


    /* Accent colors */
    --accent-a: #48BEFF;
    --accent-b:  #D90368; /* Cherry Lipstick */


    /* ----------------------------- */
    /* BORDER                        */
    /* ----------------------------- */
    --borderLight: var(--lightBorder);
    --borderDark: var(--dark-border);

}

/* ------------------------------------------------------ */
/* LAYOUT UTILITIES                                */
/* ------------------------------------------------------ */

/* Display */
.inline-flex                { display: inline-flex }

.no-display           { display: none }

.block                { display: block }

.flex                 { display: flex; }
.flex-row             { flex-direction: row; }
.flex-row-reverse     { flex-direction: row-reverse; }
.flex-column          { flex-direction: column; }

.ai-start             { align-items: flex-start; }
.ai-end               { align-items: flex-end; }
.ai-center            { align-items: center; }

.ac-start             { align-content: flex-start; }
.ac-end               { align-content: flex-end; }
.ac-center            { align-content: center; }

.jc-start             { justify-content: flex-start; }
.jc-end               { justify-content: flex-end; }
.jc-center            { justify-content: center; }
.jc-sb                { justify-content: space-between; }

/* Grid Layouts */
.grid                 { display: grid }

.grid-cols-1     { grid-template-columns: 1fr }
.grid-rows-1     { grid-template-rows: 1fr }

/* 1fr */
.grid-temp-col-1fr    { grid-template-columns: 1fr }
.grid-temp-row-1fr    { grid-template-rows: 1fr }

/* Grid Cols / Rows */
.grid-rows-4     { grid-template-rows: repeat(4, 1fr) }
.grid-cols-4     { grid-template-columns: repeat(4, 1fr)}

.grid-rows-5     { grid-template-rows: repeat(5, 1fr) }

.grid-cols-5     { grid-template-columns: repeat(5, 1fr)}
.grid-cols-6    { grid-template-columns: repeat(6, 1fr)}

.grid-cols-7     { grid-template-columns: repeat(7, 1fr)}

/* FLEX */

.dot  { width: 0.5rem; height: 0.5rem; min-width: 0.5rem; min-height: 0.5rem }
.icon { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem }
.test { width: 5rem; height: 5rem; }

/* ------------------------------------------------------ */
/* WIDTH                                                  */
/* ------------------------------------------------------ */

/* px */

.w-300            { width: 300px }
.w-200            { width: 200px }
.w-350            { width: 350px }
.w-480            { width: 480px; }
.w-720            { width: 720px; }
.w-1080           { width: 1080px; }
.w-1280           { width: 1280px; }
.w-1440           { width: 1440px; }
.w-1920           { width: 1920px; }
.w-view           { width: 100vh }


/* % */
.w-30p           { width: 30% }
.w-40p   { width: 40% }
.w-50p          { width: 50% }
.w-60p  { width: 60%}
.w-70p            { width: 70% }
.w-80p            { width: 80% }
.w-90p            { width: 90% }
.w-full           { width: 100%; }



/* ----- Min Width ----- */
.min-w-max-content  { min-width: max-content }

/* px */
.min-w-180px    { min-width: 180px }
.min-w-240px    { min-width: 240px }
.min-w-300px    { min-width: 300px }
.min-w-340px    { min-width: 340px }
.min-w-480px    { min-width: 480px }
.min-w-720px   { min-width: 720px }
.min-w-1440p   { min-width: 1440px }

.min-w-0          { min-width: 0 }


/* % */
.min-w-25p      { min-width: 25% }
.min-w-30p      { min-width: 30% }
.min-w-40p      { min-width: 40% }
.min-w-60p      { min-width: 60% }
.min-w-70p      { min-width: 70% }


/* ----- Max Width ----- */
.max-w-content    { width: max-content }

/* px */
.max-w-200        { max-width: 200px }
.max-w-300        { max-width: 300px }
.max-w-350        { max-width: 350px }
.max-w-400        { max-width: 400px }
.max-w-480        { max-width: 480px }
.max-w-720        { max-width: 720px }
.max-w-800        { max-width: 800px }
.max-w-1080       { max-width: 1080px }
.max-w-1200       { max-width: 1200px }
.max-w-1440       { max-width: 1440px; }
.max-w-1920       { max-width: 1920px }
.max-w-full       { max-width: 100% }

/* % */
.max-w-25p      { max-width: 25% }
.max-w-30p      { max-width: 30% }
.max-w-35p      { max-width: 35% }
.max-w-50p      { max-width: 50% }
.max-w-80p      { max-width: 80% }


/* ------------------------------------------------------ */
/* HEIGHT                                                 */
/* ------------------------------------------------------ */

.h-1px              { height: 1px }
.h-2px              { height: 2px }
.h-180px            { height: 180px }
.h-200px            { height: 200px }
.h-320px            { height: 320px }
.h-480px            { height: 480px; }
.h-720px            { height: 720px; }
.h-1080px           { height: 1080px; }
.h-1280px           { height: 1280px; }
.h-1440px           { height: 1440px; }
.h-1920px           { height: 1920px; }
.h-full             { height: 100%; }


/* Percentage */
.h-40p      { height: 40% }
.h-70p      { height: 70% }
.h-80p      { height: 80% }

/* Height Viewport */
.h-view             { height: 100vh; }


.min-h-max-content  { height: max-content; max-height: max-content !important }
.min-h-0            { min-height: 0 }
.min-h-100          { min-height: 100px }
.min-h-180          { min-height: 180px; }
.min-h-200          { min-height: 200px; }
.min-h-280          { min-height: 280px }
.min-h-320          { min-height: 320px; }
.min-h-400          { min-height: 400px; }
.min-h-720          { min-height: 600px }
.min-h-1080         { min-height: 1080px }
.min-h-1400         { min-height: 1440px }


.min-h-50vh      { min-height: 50vh }


/* Max Height */
.max-h-200        { max-height: 200px }
.max-h-300        { max-height: 300px }
.max-h-720        { max-height: 720px }


.header-height  { height: var(--headerHeight) }
.banner-height  { height: var(--banner-height) }

.logo-sizing    { height: 30px; width: 30px }


/* ------------------------------------------------------ */
/* PADDING                                                */
/* ------------------------------------------------------ */

/* 0.25rem (4px) */
.p-4    { padding: 0.25rem; }
.px-4   { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-4   { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.pt-4   { padding-top: 0.25rem; }
.pb-4   { padding-bottom: 0.25rem; }
.pl-4   { padding-left: 0.25rem; }
.pr-4   { padding-right: 0.25rem; }

/* 0.5rem (8px) */
.p-8    { padding: 0.5rem; }
.px-8   { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-8   { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.pt-8   { padding-top: 0.5rem; }
.pb-8   { padding-bottom: 0.5rem; }
.pl-8   { padding-left: 0.5rem; }
.pr-8   { padding-right: 0.5rem; }

/* 0.75rem (12px) */
.p-12   { padding: 0.75rem; }
.px-12  { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-12  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.pt-12  { padding-top: 0.75rem; }
.pb-12  { padding-bottom: 0.75rem; }
.pl-12  { padding-left: 0.75rem; }
.pr-12  { padding-right: 0.75rem; }

/* 1rem (16px) */
.p-16   { padding: 1rem;}
.px-16  { padding-left: 1rem; padding-right: 1rem; }
.py-16  { padding-top: 1rem;  padding-bottom: 1rem; }
.pt-16  { padding-top: 1rem; }
.pb-16  { padding-bottom: 1rem; }
.pl-16  { padding-left: 1rem; }
.pr-16  { padding-right: 1rem; }

.p-32  { padding: 2rem }
.px-32 { padding-left: 2rem; padding-right: 2rem; }
.py-32 { padding-top: 2rem;  padding-bottom: 2rem; }
.pt-32 { padding-top: 2rem; }
.pb-32 { padding-bottom: 2rem; }
.pl-32 { padding-left: 2rem; }
.pr-32 { padding-right: 2rem; }

/* ------------------------------------------------------ */
/* MARGIN                                                 */
/* ------------------------------------------------------ */

/* 0.25rem (4px) */
.m-4    { margin: 0.25rem; }
.mx-4   { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-4   { margin-top: 0.25rem;  margin-bottom: 0.25rem; }
.mt-4   { margin-top: 0.25rem; }
.mb-4   { margin-bottom: 0.25rem; }
.ml-4   { margin-left: 0.25rem; }
.mr-4   { margin-right: 0.25rem; }

/* 0.5rem (8px) */
.m-8    { margin: 0.5rem; }
.mx-8   { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-8   { margin-top: 0.5rem;  margin-bottom: 0.5rem; }
.mt-8   { margin-top: 0.5rem; }
.mb-8   { margin-bottom: 0.5rem; }
.ml-8   { margin-left: 0.5rem; }
.mr-8   { margin-right: 0.5rem; }

/* 0.75rem (12px) */
.m-12   { margin: 0.75rem; }
.mx-12  { margin-left: 0.75rem; margin-right: 0.75rem; }
.my-12  { margin-top: 0.75rem;  margin-bottom: 0.75rem; }
.mt-12  { margin-top: 0.75rem; }
.mb-12  { margin-bottom: 0.75rem; }
.ml-12  { margin-left: 0.75rem; }
.mr-12  { margin-right: 0.75rem; }

/* 1rem (16px) */
.m-16   { margin: 1rem; }
.mx-16  { margin-left: 1rem; margin-right: 1rem; }
.my-16  { margin-top: 1rem;  margin-bottom: 1rem; }
.mt-16  { margin-top: 1rem; }
.mb-16  { margin-bottom: 1rem; }
.ml-16  { margin-left: 1rem; }
.mr-16  { margin-right: 1rem; }

.m-32   { margin: 2rem}
.mt-32  { margin-top: 2rem }

/* ------------------------------------------------------ */
/* FONT SIZE                                              */
/* ------------------------------------------------------ */

.f-size-1       { font-size: 0.5rem; }
.f-size-2       { font-size: 0.6rem; }
.f-size-3       { font-size: 0.7rem; }
.f-size-4       { font-size: 0.8rem; }
.f-size-5       { font-size: 0.9rem; }
.f-size-6       { font-size: 1.0rem; }
.f-size-7       { font-size: 1.1rem; }
.f-size-8       { font-size: 1.2rem; }
.f-size-9       { font-size: 1.3rem; }
.f-size-10      { font-size: 1.4rem; }
.f-size-11      { font-size: 1.5rem; }
.f-size-12      { font-size: 1.6rem; }
.f-size-13      { font-size: 1.7rem; }
.f-size-14      { font-size: 1.8rem; }
.f-size-15      { font-size: 1.9rem; }
.f-size-16      { font-size: 2.0rem; }
.f-size-17      { font-size: 2.5rem; }
.f-size-18      { font-size: 3.0rem; }
.f-size-19      { font-size: 3.5rem; }
.f-size-20      { font-size: 4.0rem }
.f-size-21      { font-size: 4.5rem; }

/* ------------------------------------------------------ */
/* FONT WEIGHT                                            */
/* ------------------------------------------------------ */

.f-weight-200       { font-weight: 200 }
.f-weight-400       { font-weight: 400; }
.f-weight-600       { font-weight: 600; }
.f-weight-800       { font-weight: 800; }

/* ------------------------------------------------------ */
/* FONT STYLE                                             */
/* ------------------------------------------------------ */

.f-style-normal     { font-style: normal; }
.f-style-italic     { font-style: italic; }

/* ------------------------------------------------------ */
/* TEXT COLOR                                             */
/* ------------------------------------------------------ */

.text-dark-100          { color: var(--dark); }
.text-dark-200          { color: var(--dark-1); }
.text-dark-300          { color: var(--dark-2); }

.text-white             { color: white }
.text-light-100         { color: var(--light); }
.text-light-200         { color: var(--light-1); }
.text-light-300         { color: var(--light-2); }

.text-accent-a     { color: var(--accent-a) }
.text-accent-02    { color: var(--accent-b) }

/* ------------------------------------------------------ */
/* TEXT TRANSFORM                                         */
/* ------------------------------------------------------ */

.text-up            { text-transform: uppercase; }
.text-lower         { text-transform: lowercase; }
.text-cap           { text-transform: capitalize; }

/* ------------------------------------------------------ */
/* TEXT ALIGNMENT                                         */
/* ------------------------------------------------------ */

.text-center        { text-align: center; }
.text-left          { text-align: left; }
.text-right         { text-align: right; }

/* ------------------------------------------------------ */
/* TEXT DECORATION                                        */
/* ------------------------------------------------------ */

.text-no-decor          { text-decoration: none; }

/* ------------------------------------------------------ */
/* OPTICAL SIZING                                         */
/* ------------------------------------------------------ */

.f-optical-auto         { font-optical-sizing: auto; }

/* ------------------------------------------------------ */
/* WHITE SPACE                                            */
/* ------------------------------------------------------ */

.white-space-wrap       { white-space: wrap }
.white-space-nowrap     { white-space: nowrap }

/* ------------------------------------------------------ */
/* TEXT OVERFLOW                                            */
/* ------------------------------------------------------ */

.t-overflow-ellipsis        { text-overflow: ellipsis }

/* ------------------------------------------------------ */
/* LETTER SPACING                                         */
/* ------------------------------------------------------ */

.ls-n1  { letter-spacing: -1px}
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }
.ls-4 { letter-spacing: 4px; }

/* ------------------------------------------------------ */
/* LINE HEIGHT                                            */
/* ------------------------------------------------------ */

.lh-1       { line-height: 1.25 }
.lh-2       { line-height: 1.5 }
.lh-3       { line-height: 2 }

/* ------------------------------------------------------ */
/* BACKGROUND COLOR                                       */
/* ------------------------------------------------------ */

.bg-none        { background-color: transparent }

/* Dark shades */
.bg-dark         { background-color: var(--dark); }
.bg-dark-1       { background-color: var(--dark-1); }
.bg-dark-2       { background-color: var(--dark-2); }
.bg-faded        { background-color: var(--dark-faded)}

/* Light shades */
.bg-light        { background-color: var(--light); }
.bg-light-1      { background-color: var(--light-1); }
.bg-light-2      { background-color: var(--light-2); }

/* Accent shades */
.bg-accent-a    { background-color: var(--accent-a)}
.bg-accent-b    { background-color: var(--accent_02)}

/* Gradients */
.bg-grad-up   { background: linear-gradient(to top, var(--dark-1), transparent) }
.bg-grad-right { background: linear-gradient(to right, transparent, var(--accent_01))}

/* ------------------------------------------------------ */
/* BACKGROUND COLOR                                       */
/* ------------------------------------------------------ */

.obj-pos-c        { object-position: center center }
.obj-fit-cover    { object-fit: cover }

/* ------------------------------------------------------ */
/* POSITIONING                                            */
/* ------------------------------------------------------ */

.pos-rel   { position: relative; }
.pos-abs   { position: absolute; }
.pos-fixed { position: fixed; }

.top-n2  { top: -2rem }
.top-0      { top: 0; }

.bot-0      { bottom: 0; }
.left-0     { left: 0; }
.right-0    { right: 0; }

.top-x      { top: 0.5rem }
.right-x   { right: 0.5rem }
.left-x    { left: 0.5rem }
.bot-x     { bottom: 0.5rem }

.top-1      { top: 1rem }
.bot-1      { bottom: 1rem }
.left-1     { left: 1rem }
.right-1    { right: 1rem }

.top-2      { top: 2rem }
.bot-2      { bottom: 2rem }
.left-2     { left: 2rem }
.right-2    { right: 2rem }


/* ------------------------------------------------------ */
/* GAP                                                    */
/* ------------------------------------------------------ */

.gap-sm  { gap: 0.25rem }
.gap-med   { gap: 0.5rem }
.gap-1   { gap: 1rem; }
.gap-2   { gap: 2rem; }

/* Audio */
.gap-vfx { gap: 0.3px }

/* ------------------------------------------------------ */
/* BORDER                                                 */
/* ------------------------------------------------------ */


/* General */
.br-none    { border: none !important; }
.br-slim    { border: 1px solid var(--borderDark); }
.br-thick   { border: 2px solid var(--borderDark); }

/* Sides */
.br-r       { border-right: 1px solid var(--borderDark); }
.br-b       { border-bottom: 1px solid var(--borderDark); }
.br-t       { border-top: 1px solid var(--borderDark); }
.br-l       { border-left: 1px solid var(--borderDark); }

/* Light Border */
.br-slim-light     { border: 1px solid var(--lightBorder)}


/* ------------------------------------------------------ */
/* OUTLINE                                                */
/* ------------------------------------------------------ */

.ol-none    { outline: none !important; }
.ol-slim    { outline: 1px solid var(--border); }
.ol-thick   { outline: 2px solid var(--border); }
.ol-hidden  { outline: 1px solid transparent}

/* ------------------------------------------------------ */
/* BORDER RADIUS                                          */
/* ------------------------------------------------------ */

/* Default */
.rad-default        { border-radius: var(--borderRadius) }

/* General */
.rad-s      { border-radius: 0.5rem; }
.rad-m      { border-radius: 1rem; }
.rad-l      { border-radius: 1.5rem; }
.rad-xl     { border-radius: 2rem }
.rounded    { border-radius: var(--borderRadius) }
.circle     { border-radius: 50% }


/* ------------------------------------------------------ */
/* OPACITY                                                */
/* ------------------------------------------------------ */


.opacity-0    { opacity: 0; }
.opacity-10  { opacity: 0.1 }
.opacity-25   { opacity: 0.25; }
.opacity-50   { opacity: 0.5; }
.opacity-75   { opacity: 0.75; }
.opacity-100  { opacity: 1; }


/* ------------------------------------------------------ */
/* Z-INDEX                                                */
/* ------------------------------------------------------ */


.z-0   { z-index: 0; }
.z-1   { z-index: 1; }
.z-2   { z-index: 2; }
.z-3   { z-index: 3; }
.z-4   { z-index: 4; }
.z-5   { z-index: 5; }
.z-6   { z-index: 6; }
.z-7   { z-index: 7; }
.z-8   { z-index: 8; }
.z-9   { z-index: 9; }
.z-10  { z-index: 10; }
.z-999 { z-index: 999 }


/* ------------------------------------------------------ */
/* BACKDROP FILTER                                        */
/* ------------------------------------------------------ */


.backdrop-filter-blur-3 { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.backdrop-filter-blur-6 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.backdrop-filter-blur-9 { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.backdrop-filter-blur-12 { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }


/* ------------------------------------------------------ */
/* ASPECT RATIO                                         */
/* ------------------------------------------------------ */


.aspect-ratio-1-1          { aspect-ratio: 1 / 1 }
.aspect-ratio-16-9         { aspect-ratio: 16 / 9 }


/* ------------------------------------------------------ */
/* POINTER EVENTS                                         */
/* ------------------------------------------------------ */


.user-select-none         { user-select: none }
.point-event-auto         { pointer-events: auto }
.point-event-none         { pointer-events: none }


/* ------------------------------------------------------ */
/* CURSOR STYLE                                           */
/* ------------------------------------------------------ */


.cursor-pointer             { cursor: pointer; }
.cursor-resize-e            { cursor: e-resize; }


/* ------------------------------------------------------ */
/* OVERFLOW                                               */
/* ------------------------------------------------------ */


.overflow-scroll       { overflow: scroll }
.overflow-hidden        { overflow: hidden }

/* X-Axis */
.overflow-x-scroll       { overflow-x: scroll }

/* Y-Axis */
.overflow-y-scroll       { overflow-y: scroll }


/* ------------------------------------------------------ */
/* ROTATION                                               */
/* ------------------------------------------------------ */


.rotate-180 { transform: rotate(-180deg)}
.rotate-90 { transform: rotate(90deg)}


/* ------------------------------------------------------ */
/* ROTATION                                               */
/* ------------------------------------------------------ */

.transform-r-100     { transform: translateX(100%)}

/* ------------------------------------------------------ */
/* ANIMATIONS                                             */
/* ------------------------------------------------------ */


.animate-fade { animation: fade-in 1s ease forwards; }
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.resize-none        { resize: none }

/* ------------------------------------------------------ */
/* TRANSITION                                             */
/* ------------------------------------------------------ */


.transition-opacity-300     { transition: opacity 300ms ease-in-out; }

.transition-all-100              { transition: all 100ms ease-in-out}
.transition-all-300         { transition: all 300ms ease-in-out; }
.transition-all-500         { transition: all 500ms ease-in-out; }

.transition-bezier-bounce         { transition: all 1s cubic-bezier(0.5, 1.2, 0.5, 1); }
.trans-all-bounce              { transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.25)}


/* ------------------------------------------------------ */
/* HOVER                                                  */
/* ------------------------------------------------------ */


/* Background => Dark */
.hover\:bg-dark:hover { background-color: var(--dark) }
.hover\:bg-dark-1:hover { background-color: var(--dark-1) }
.hover\:bg-dark-2:hover { background-color: var(--dark-2) }
.hover\:bg-dark-3:hover { background-color: var(--dark-3) }
.hover\:bg-accent-a:hover  { background-color: var(--accent-a)}

/* Background => Light */
.hover\:bg-light:hover { background-color: var(--light) }

/* Opacity */
.hover\:opacity-1:hover { opacity: 1 }

/* Text */
.hover\:text-accent-a:hover { color: var(--accent-a) }

.hover\:menu-transform:hover { transform: rotate(45deg) }

/* ------------------------------------------------------ */
/* COMPONENTS                                                 */
/* ------------------------------------------------------ */

/* COMPONENTS */
.content-margin-top   { margin-top: var(--headerHeight) }
.menu-bar  { width: 3px; height: 3px; background-color: white; border-radius: 50% }

.h-view-adjust  { height: calc(100vh - var(--headerHeight) )}

/* ------------------------------------------------------ */
/* MEDIA QUERY                                            */
/* ------------------------------------------------------ */

/* Mobile (sm) */
@media (max-width: 1200px) {
    .sm\:display-none { display: none; }
}