@font-face {
    font-family: 'Inter';
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
    font-style: italic;
    font-weight: 100 900;
    src: url("../fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2");
}

:root {
    /**
     * (16 * 1) * 1.200 
     */
    --text-x5l: 2.986rem;
    --text-x4l: 2.488rem;
    --text-x3l: 2.074rem;
    --text-x2l: 1.728rem;
    --text-xl: 1.44rem;
    --text-l: 1.2rem;

    --text-m: 1rem;

    /**
     * (16 - 1) * 1.414 
     */
    --text-s: .911rem;
    --text-xs: .867rem;
    --text-x2s: .823rem;
    --text-x3s: .779rem;
    --text-x4s: .734rem;
    --text-x5s: .690rem;
    --text-x6s: .646rem;
    --text-x7s: .602rem;
    --text-x8s: .558rem;

    --light: #ffffff;
    --dark: #000000;

    --gray-1: #1d1c1c;
    --gray-2: #363535;
    --gray-3: #4f4f4f;
    --gray-4: #686868;
    --gray-5: #828181;
    --gray-6: #9b9a9a;
    --gray-7: #b4b3b3;
    --gray-8: #cdcdcd;
    --gray-9: #e6e6e6;
    --gray-10: ;

    --primary-light: ;
    --primary: #0c5850;
    --primary-dark: ;

    --secondary-light: ;
    --secondary: ;
    --secondary-dark: ;

    --heading-font: "David Libre", serif;
    --body-font: "Manrope", sans-serif;
}

body {
    color: var(--dark);
    font-family: var(--body-font);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: .5em;
    font-weight: 800;
    font-family: var(--heading-font);
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

b {
    font-weight: 700;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 2em;
}

/*//////////////////////////////////////////////////////////
Layout
/////////////////////////////////////////////////////////*/

.wrapper {
    margin: 100px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1em;
}

/*///// Flex /////*/

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

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

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

.flex-wrap   { flex-wrap: wrap }
.flex-nowrap { flex-wrap: nowrap }

.flex-shrink-0 { flex-shrink: 0 }

.gap-025  { gap: .25em }
.gap-05   { gap: .5em }
.gap-1    { gap: 1em }
.gap-1-5  { gap: 1.5em }
.gap-2    { gap: 2em }

/*///// Grid /////*/

.grid { display: grid }

.grid-6 { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr )) }
.grid-4 { grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr )) }
.grid-3 { grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr )) }
.grid-2 { grid-template-columns: repeat( auto-fill, minmax( 380px, 1fr )) }

.grid-fill-min-400 { grid-template-columns: repeat( auto-fill, minmax( 400px, 1fr ) ) }
.grid-fill-min-300 { grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ) }
.grid-fill-min-250 { grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ) }
.grid-fill-min-200 { grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ) }

.grid-fit-min-400 { grid-template-columns: repeat( auto-fit, minmax( 400px, 1fr ) ) }
.grid-fit-min-300 { grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ) }
.grid-fit-min-250 { grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ) }
.grid-fit-min-200 { grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ) }

.grid-gap-025 { grid-gap: .25em }
.grid-gap-05  { grid-gap: .5em }
.grid-gap-1   { grid-gap: 1em }
.grid-gap-1-5 { grid-gap: 1.5em }
.grid-gap-2   { grid-gap: 2em }
.grid-gap-2-5 { grid-gap: 2.5em }
.grid-gap-3   { grid-gap: 3em }

/*///// Position /////*/

.position-fixed    { position: fixed }
.position-relative { position: relative }
.position-absolute { position: absolute }

.top-0   { top: 0 }
.top-05  { top: .5em }
.top-1   { top: 1em }
.top-1-5 { top: 1.5em }
.top-2   { top: 2em }

.left-0   { left: 0 }
.left-05  { left: .5em }
.left-1   { left: 1em }
.left-1-5 { left: 1.5em }
.left-2   { left: 2em }

.right-0   { right: 0 }
.right-05  { right: .5em }
.right-1   { right: 1em }
.right-1-5 { right: 1.5em }
.right-2   { right: 2em }

.bottom-0   { bottom: 0 }
.bottom-05  { bottom: .5em }
.bottom-1   { bottom: 1em }
.bottom-1-5 { bottom: 1.5em }
.bottom-2   { bottom: 2em }

/*///// Display /////*/

.display-none  { display: none !important }
.display-block { display: block }
.display-inline-block { display: inline-block }

/*///// Overflow /////*/

.overflow-auto     { overflow: auto }
.overflow-hidden   { overflow: hidden }
.overflow-x-scroll { overflow-x: scroll }
.overflow-y-scroll { overflow-y: scroll }

/*///// Float /////*/

.float-left { float: left }
.float-right { float: right }

/*//////////////////////////////////////////////////////////
Colors & Backgrounds
/////////////////////////////////////////////////////////*/

/*///// Colors /////*/

.gray-1 { color: var(--gray-1) }
.gray-2 { color: var(--gray-2) }
.gray-3 { color: var(--gray-3) }
.gray-4 { color: var(--gray-4) }
.gray-5 { color: var(--gray-5) }
.gray-6 { color: var(--gray-6) }
.gray-7 { color: var(--gray-7) }
.gray-8 { color: var(--gray-8) }
.gray-9 { color: var(--gray-9) }

.color-light { color: var(--light) }
.color-dark  { color: var(--dark) }

.color-primary-light { color: var(--primary-light) }
.color-primary       { color: var(--primary) }
.color-primary-dark  { color: var(--primary-dark) }

.color-secondary-light { color: var(--secondary-light) }
.color-secondary       { color: var(--secondary) }
.color-secondary-dark  { color: var(--secondary-dark) }

/*///// Backgrounds /////*/

.bg-gray-1 { background: var(--gray-1) }
.bg-gray-2 { background: var(--gray-2) }
.bg-gray-3 { background: var(--gray-3) }
.bg-gray-4 { background: var(--gray-4) }
.bg-gray-5 { background: var(--gray-5) }
.bg-gray-6 { background: var(--gray-6) }
.bg-gray-7 { background: var(--gray-7) }
.bg-gray-8 { background: var(--gray-8) }
.bg-gray-9 { background: var(--gray-9) }
.bg-gray-10 { background: var(--gray-10) }

.bg-dark  { background: var(--primary) }
.bg-light { background: var(--light) }

.bg-primary-light { background: var(--primary-light) }
.bg-primary       { background: var(--primary) }
.bg-primary-dark  { background: var(--primary-dark) }

.bg-secondary-light { background: var(--secondary-light) }
.bg-secondary       { background: var(--secondary) }
.bg-secondary-dark  { background: var(--secondary-dark) }

/*//////////////////////////////////////////////////////////
Typography
/////////////////////////////////////////////////////////*/

.heading-font { font-family: var(--heading-font) }
.body-font  { font-family: var(--body-font) }

/*///// Font Weight /////*/

.font-w300 { font-weight: 300 }
.font-w400 { font-weight: 400 }
.font-w500 { font-weight: 500 }
.font-w600 { font-weight: 600 }
.font-w700 { font-weight: 700 }
.font-w800 { font-weight: 800 }
.font-w900 { font-weight: 900 }

/*///// Text Alignt /////*/

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

/*///// Text Style /////*/

.text-italic        { font-style: italic }
.text-bold          { font-weight: bold }
.text-underline     { text-decoration: underline }
.text-line-through  { text-decoration: line-through }

/*///// Text Transform /////*/

.text-uppercase  { text-transform: uppercase }
.text-capitalize { text-transform: capitalize }
.text-lowercase  { text-transform: lowercase }

/*///// Text Size /////*/

.text-l   { font-size: var(--text-l) }
.text-xl  { font-size: var(--text-xl) }
.text-x2l { font-size: var(--text-x2l) }
.text-x3l { font-size: var(--text-x3l) }
.text-x4l { font-size: var(--text-x4l) }
.text-x5l { font-size: var(--text-x5l) }

.text-m   { font-size: var(--text-m) }

.text-s   { font-size: var(--text-s) }
.text-xs  { font-size: var(--text-xs) }
.text-x2s { font-size: var(--text-x2s) }
.text-x3s { font-size: var(--text-x3s) }
.text-x4s { font-size: var(--text-x4s) }
.text-x5s { font-size: var(--text-x5s) }
.text-x6s { font-size: var(--text-x6s) }
.text-x7s { font-size: var(--text-x7s) }
.text-x8s { font-size: var(--text-x8s) }

@media (max-width: 420px) {
    .text-mobile-l   { font-size: var(--text-l) }
    .text-mobile-xl  { font-size: var(--text-xl) }

    .text-mobile-m { font-size: var(--text-m) }

    .text-mobile-s   { font-size: var(--text-s) }
    .text-mobile-xs  { font-size: var(--text-xs) }
    .text-mobile-x2s { font-size: var(--text-x2s) }
    .text-mobile-x3s { font-size: var(--text-x3s) }
    .text-mobile-x4s { font-size: var(--text-x4s) }
    .text-mobile-x5s { font-size: var(--text-x5s) }
    .text-mobile-x6s { font-size: var(--text-x6s) }
    .text-mobile-x7s { font-size: var(--text-x7s) }
    .text-mobile-x8s { font-size: var(--text-x8s) }
}

/*///// Line Height /////*/

.lh-1   { line-height: 1 }
.lh-1-1 { line-height: 1.1 }
.lh-1-2 { line-height: 1.2 }
.lh-1-3 { line-height: 1.3 }
.lh-1-4 { line-height: 1.4 }
.lh-1-5 { line-height: 1.5 }
.lh-1-6 { line-height: 1.6 }
.lh-1-7 { line-height: 1.7 }
.lh-1-8 { line-height: 1.8 }

/*///// Wrap /////*/

.white-space-nowrap { white-space: nowrap }
.text-wrap          { text-wrap: wrap }
.text-no-wrap       { text-wrap: nowrap }
.text-ellipsis      { text-overflow: ellipsis; }

/*//////////////////////////////////////////////////////////
Sizing
/////////////////////////////////////////////////////////*/

.w-100vh { width: 100vh }
.w-auto  { width: auto }
.w-100   { width: 100% }
.w-90    { width: 90% }
.w-80    { width: 80% }
.w-70    { width: 70% }
.w-60    { width: 60% }
.w-50    { width: 50% }
.w-40    { width: 40% }
.w-30    { width: 30% }
.w-20    { width: 20% }
.w-10    { width: 10% }

.h-100vh { height: 100vh }
.h-auto  { height: auto }
.h-100   { height: 100% }
.h-90    { height: 90% }
.h-80    { height: 80% }
.h-70    { height: 70% }
.h-60    { height: 60% }
.h-50    { height: 50% }
.h-40    { height: 40% }
.h-30    { height: 30% }
.h-20    { height: 20% }
.h-10    { height: 10% }

/*///// Margin & Padding /////*/

.reset-margin  { margin: 0 !important }
.reset-padding { padding: 0 !important }

/*///// Margin /////*/

.m-2-5 { margin: 2.5em }
.m-2   { margin: 2em }
.m-1-5 { margin: 1.5em }
.m-1   { margin: 1em }
.m-05  { margin: .5em }

.mt-5   { margin-top: 5em }
.mt-4-5 { margin-top: 4.5em }
.mt-4   { margin-top: 4em }
.mt-3-5 { margin-top: 3.5em }
.mt-3   { margin-top: 3em }
.mt-2-5 { margin-top: 2.5em }
.mt-2   { margin-top: 2em }
.mt-1-5 { margin-top: 1.5em }
.mt-1   { margin-top: 1em }
.mt-05  { margin-top: .5em }

.mr-5   { margin-right: 5em }
.mr-4-5 { margin-right: 4.5em }
.mr-4   { margin-right: 4em }
.mr-3-5 { margin-right: 3.5em }
.mr-3   { margin-right: 3em }
.mr-2-5 { margin-right: 2.5em }
.mr-2   { margin-right: 2em }
.mr-1-5 { margin-right: 1.5em }
.mr-1   { margin-right: 1em }
.mr-05  { margin-right: .5em }

.mb-5   { margin-bottom: 5em }
.mb-4-5 { margin-bottom: 4.5em }
.mb-4   { margin-bottom: 4em }
.mb-3-5 { margin-bottom: 3.5em }
.mb-3   { margin-bottom: 3em }
.mb-2-5 { margin-bottom: 2.5em }
.mb-2   { margin-bottom: 2em }
.mb-1-5 { margin-bottom: 1.5em }
.mb-1   { margin-bottom: 1em }
.mb-05  { margin-bottom: .5em }

.ml-5   { margin-left: 5em }
.ml-4-5 { margin-left: 4.5em }
.ml-4   { margin-left: 4em }
.ml-3-5 { margin-left: 3.5em }
.ml-3   { margin-left: 3em }
.ml-2-5 { margin-left: 2.5em }
.ml-2   { margin-left: 2em }
.ml-1-5 { margin-left: 1.5em }
.ml-1   { margin-left: 1em }
.ml-05  { margin-left: .5em }

/*///// Padding /////*/

.p-2-5 { padding: 2.5em }
.p-2   { padding: 2em }
.p-1-5 { padding: 1.5em }
.p-1   { padding: 1em }
.p-05  { padding: .5em }

.pt-5   { padding-top: 5em }
.pt-4-5 { padding-top: 4.5em }
.pt-4   { padding-top: 4em }
.pt-3-5 { padding-top: 3.5em }
.pt-3   { padding-top: 3em }
.pt-2-5 { padding-top: 2.5em }
.pt-2   { padding-top: 2em }
.pt-1-5 { padding-top: 1.5em }
.pt-1   { padding-top: 1em }
.pt-05  { padding-top: .5em }

.pb-5   { padding-bottom: 5em }
.pb-4-5 { padding-bottom: 4.5em }
.pb-4   { padding-bottom: 4em }
.pb-3-5 { padding-bottom: 3.5em }
.pb-3   { padding-bottom: 3em }
.pb-2-5 { padding-bottom: 2.5em }
.pb-2   { padding-bottom: 2em }
.pb-1-5 { padding-bottom: 1.5em }
.pb-1   { padding-bottom: 1em }
.pb-05  { padding-bottom: .5em }

.pl-5   { padding-left: 5em }
.pl-4-5 { padding-left: 4.5em }
.pl-4   { padding-left: 4em }
.pl-3-5 { padding-left: 3.5em }
.pl-3   { padding-left: 3em }
.pl-2-5 { padding-left: 2.5em }
.pl-2   { padding-left: 2em }
.pl-1-5 { padding-left: 1.5em }
.pl-1   { padding-left: 1em }
.pl-05  { padding-left: .5em }

.pr-5   { padding-right: 5em }
.pr-4-5 { padding-right: 4.5em }
.pr-4   { padding-right: 4em }
.pr-3-5 { padding-right: 3.5em }
.pr-3   { padding-right: 3em }
.pr-2-5 { padding-right: 2.5em }
.pr-2   { padding-right: 2em }
.pr-1-5 { padding-right: 1.5em }
.pr-1   { padding-right: 1em }
.pr-05  { padding-right: .5em }

/*//////////////////////////////////////////////////////////
Misc
/////////////////////////////////////////////////////////*/

/*///// Border /////*/

.hrl {
    display: block;
    width: 100%;
    height: .5px;
    background: var(--gray-9);
}

/*///// Border Radius /////*/

.br-s  { border-radius: .5em }
.br-m  { border-radius: 1em }
.br-l  { border-radius: 1.5em }
.br-xl { border-radius: 2em }

/*///// Cursor /////*/

.cursor-pointer { cursor: pointer }

/*///// Rotate /////*/

.rotate-45  { transform: rotate(45deg) }
.rotate-90  { transform: rotate(90deg) }
.rotate-135 { transform: rotate(135deg) }
.rotate-180 { transform: rotate(180deg) }
.rotate-225 { transform: rotate(225deg) }
.rotate-270 { transform: rotate(270deg) }
.rotate-315 { transform: rotate(315deg) }

/*///// Transition /////*/

.transition-5s { 
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}
.transition-4s { 
    transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
}
.transition-3s { 
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
}
.transition-2s { 
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
}

/*///// Text hover /////*/

.link-hover:hover {
    text-decoration: underline;
}

/*//////////////////////////////////////////////////////////
Image
/////////////////////////////////////////////////////////*/

.aspect-ratio-18-9 { aspect-ratio: 18/9 }
.aspect-ratio-9-18 { aspect-ratio: 9/18 }
.aspect-ratio-16-9 { aspect-ratio: 16/9 }
.aspect-ratio-9-16 { aspect-ratio: 9/16 }
.aspect-ratio-4-3  { aspect-ratio: 4/3 } 
.aspect-ratio-3-4  { aspect-ratio: 3/4 } 
.aspect-ratio-3-2  { aspect-ratio: 3/2 } 
.aspect-ratio-2-3  { aspect-ratio: 2/3 } 
.aspect-ratio-1-1  { aspect-ratio: 1/1 } 

.image-fluid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-hover img {
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}

.image-hover:hover img {
    transform: scale(1.1);
}

.image-circle-s {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    object-fit: cover;
}

.image-circle-m {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    object-fit: cover;
}

.image-circle-l {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    object-fit: cover;
}

.mw-100 { max-width: 100px }
.mw-200 { max-width: 200px }
.mw-300 { max-width: 300px }
.mw-400 { max-width: 400px }
.mw-500 { max-width: 500px }
.mw-600 { max-width: 600px }
.mw-700 { max-width: 700px }
.mw-800 { max-width: 800px }
.mw-900 { max-width: 900px }
.mw-1000 { max-width: 1000px }