/* HERO */

.fragments-hero{

height:100vh;
width:100%;

background-image:url('/assets/images/fragmentsmain.webp');
background-size:cover;
background-position:center;

position:relative;


font-family:"Greycliff", sans-serif;

}


/* VERTICAL TITLE (DESKTOP) */

.fragments-title{

position:absolute;

left:160px;
bottom:200px;

transform: rotate(-90deg);
transform-origin:left bottom;
font-family:"SifonnPro", sans-serif;
font-size:80px;

letter-spacing:4px;
color:white;

}


/* TEXT */

.fragments-text{

position:absolute;

left:90px;
bottom:80px;

color:white;

max-width:420px;

}

.frag-heading{

font-size:22px;
margin-bottom:12px;

}

.fragments-text p{

font-size:18px;
line-height:1.6;
color:#eaeaea;

}


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

@media (max-width:1024px){

.fragments-title{

left:80px;
bottom:200px;

font-size:50px;

}

.fragments-text{

left:60px;
bottom:60px;

max-width:340px;

}

.fragments-text p{

font-size:16px;

}

}


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

@media (max-width:768px){

.fragments-title{

transform:none;

left:40px;
bottom:240px;

font-size:42px;

}

.fragments-text{

left:40px;
bottom:80px;

max-width:280px;

}

.fragments-text p{

font-size:15px;

}

.frag-heading{

font-size:18px;

}

}


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

@media (max-width:480px){

.fragments-title{

font-size:36px;
bottom:200px;

}

.fragments-text{

left:30px;
bottom:60px;

}

.fragments-text p{

font-size:14px;

}

}