@charset "utf-8";

/*==================================================
GLOBULAR RECORDS
ABOUT INTRO
about-intro.css
==================================================*/

/*==================================================
FONT
==================================================*/

@font-face{
    font-family:"League Gothic";
    src:url("fonts/league-gothic.regular.ttf") format("truetype");
}

/*==================================================
SECTION
==================================================*/

.about-intro-section{

    position:relative;
    width:100%;

    background:#fff;
    color:#111;

    overflow:hidden;

    padding:
        clamp(90px,8vw,170px)
        0
        clamp(100px,9vw,190px);

}

/*==================================================
CONTAINER
==================================================*/

.about-intro-wrapper{

    width:min(1500px,92%);
    margin:auto;

    display:grid;

    grid-template-columns:
        clamp(75px,9vw,140px)
        minmax(0,1fr);

    column-gap:clamp(30px,5vw,90px);

    align-items:start;

}

/*==================================================
LEFT LABEL
==================================================*/

.about-label{

    position:sticky;
    top:2px;

    white-space:nowrap;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:clamp(.82rem,.7rem+.35vw,1.09rem);

    font-weight:700;

    letter-spacing:clamp(.6px,.15vw,1.5px);

    text-transform:uppercase;

    color:#111;

    padding-top:clamp(8px,1vw,18px);

}

/*==================================================
RIGHT CONTENT
==================================================*/

.about-content{

    max-width:min(1180px,100%);

    opacity:0;

    transform:
        translateY(90px)
        scale(.95);

    filter:blur(10px);

    will-change:
        transform,
        opacity,
        filter;

}

/*==================================================
TITLE
==================================================*/

.about-title{

    margin:0;

    font-family:
        "League Gothic",
        League Gothic,
        sans-serif;

    font-size:clamp(2.8rem,6vw,8rem);

    line-height:.9;

    letter-spacing:-1px;

    font-weight:400;

    text-transform:uppercase;

    color:#111;

    display:flex;

    flex-direction:column;

    gap:clamp(.02em,.08vw,.08em);
	

}

.about-title span{

    display:block;

    margin-bottom:.12em;

    white-space:nowrap;

}

/*==================================================
TEXT
==================================================*/

.about-text{

    /*margin-top:clamp(35px,5vw,80px);

    max-width:min(860px,100%);*/

}

.about-text p{

    margin:0 0 clamp(24px,3vw,42px);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(1rem,.9rem+.45vw,1.38rem);
	font-size:1.38rem;

    line-height:1.7;

    color:#262626;

}

/*==================================================
DIVIDER
==================================================*/

.about-text::before{

    content:"";

    display:block;

    width:clamp(45px,5vw,70px);

    height:2px;

    background:#111;

    margin-bottom:clamp(24px,4vw,45px);

}

/*==================================================
BACKGROUND GRAIN
==================================================*/

.about-intro-section::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.03;

    background-image:
        radial-gradient(#000 1px,transparent 1px);

    background-size:6px 6px;

}

/*==================================================
TABLETS
==================================================*/

@media (max-width:900px){

    .about-intro-wrapper{

        grid-template-columns:
            clamp(65px,12vw,90px)
            minmax(0,1fr);

        column-gap:clamp(20px,4vw,35px);

    }

}

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

@media (max-width:768px){

    .about-intro-section{

        padding:70px 0 90px;

    }

    .about-intro-wrapper{

        grid-template-columns:1fr;

        row-gap:28px;

        width:90%;

    }

    .about-label{

        position:relative;

        top:auto;

        padding-top:0;

    }

    .about-title{

        font-size:clamp(0.4rem,8vw,2.8rem);

    }

    .about-title span{

        white-space:nowrap;

    }

}