*,*:before,*:after{ box-sizing: border-box; }
body, html{ font-family: 'Inter', sans-serif; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}

/* ! Variables */
:root{
   --var-black: #1D1D1B;
   --var-blue: #8D8FB7;

   --var-space-1: 10px;
   --var-space-2: 20px;
   --var-space-3: 30px;
   --var-space-4: 50px;
   --var-space-5: 80px;
   --var-space-6: 130px;
}

/* ! Typography */
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2rem;}
h4{font-size: 1rem;}
h5{font-size: 0.8rem;}
h6{font-size: 0.6rem;}
a{text-decoration:none}



/* ! Hero */
.hero{ width: 100vw; height: 100vh; display: flex; flex-direction: row; flex-wrap: nowrap;}

.hero__col-1{ position: relative; background: #d3d3d3; height: 100%; width: calc(50vw - (350px / 2)); background: url("img/bg-1.jpg");}
.hero__col-1:after{ backdrop-filter: blur(15px); position: absolute; width: 100%; height: 100%; content: ' '; background: #8d8fb7a8;}

.hero__col-2{ position: relative; background: #d57a7a; height: 100%; width: calc(50vw - (350px / 2)); background: url("img/bg-2.jpg");}
.hero__col-2:after{ backdrop-filter: blur(15px); position: absolute; width: 100%; height: 100%; content: ' '; background: #8d8fb7a8;}

.hero__main-col{ position: relative; z-index: 10; background: #fff; height: 100%; width: 370px; padding: 400px var(--var-space-2) var(--var-space-2) var(--var-space-2);}
.hero__main-col *{ color: var(--var-black);}
.hero__main-col img{ position: absolute; left: 50%; transform: translateX(-50%); width: 600px; top: 0;}
.hero__main-col .slogan{ font-weight: 300; font-size: 30px; line-height: 40px; text-align: center; margin-bottom: var(--var-space-4);}
.hero__main-col p{ text-align: center;}
.hero__main-col .info{ width: 75%; margin: auto; margin-bottom: var(--var-space-2);}
.hero__main-col .text{ margin-top: var(--var-space-5); font-size: 30px; opacity: 0.5; font-weight: 300;}

/* ! ___display-max--sm */
@media (max-width: 575.98px) {
   .hero__main-col{ width: 100vw; padding: 350px var(--var-space-2) var(--var-space-2) var(--var-space-2);}
   .hero__main-col img{ width: 100vw;}
   .hero__main-col .slogan{ font-size: 30px; }
   .hero__main-col .info{ width: 100%;}

   .hero__col-1{display: none}
   .hero__col-2{display: none}
}