@use "sass:color";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.st1, .st2, .st3, .st4, .st5, .st6{}

.st1{
    // @include fontSize(40,50);
}

.st2{
    @include mixins.fontSize(60,60);
    color: #c3c3c3;
    margin-bottom: 40px;

    @include mixins.respondTo('md'){
        @include mixins.fontSize(44,48,variables.$baseFontSizeMd);
        margin-bottom: 30px;
    }
}

.st3{
    @include mixins.fontSize(35,35);
    font-family: variables.$ffC;
    font-weight: 400;
    color: variables.$cDark;
    margin-bottom: 4vh;

    @include mixins.respondTo('md'){
        @include mixins.fontSize(28,28,variables.$baseFontSizeMd);
        margin-bottom: 2vh;
    }
}

.sp1{
    @include mixins.fontSize(15,28);
    color: color.adjust(variables.$cDark, $alpha: -0.6);
    // padding-left: vwCol(1,$gridColGutterX);
}

.sp2{
    @include mixins.fontSize(20,30);
    color: variables.$cDark;
    margin-bottom: 3vh;
}

.sp3{
    @include mixins.fontSize(14,30);
    color: color.adjust(variables.$cDark, $alpha: -0.6);
}

.sp4{
    margin-bottom: 2vh;
    @include mixins.fontSize(20,30);
    text-transform: uppercase;
    color: variables.$cDark;
    font-weight: 700;

    @include mixins.respondTo('md'){
        @include mixins.fontSize(18,24,variables.$baseFontSizeMd);
    }
}

.sp5{
    margin-bottom: 4vh;
    @include mixins.fontSize(30,46);

    b, strong{
        color: variables.$cPrimary
    }

    @include mixins.respondTo('md'){
        @include mixins.fontSize(22,34,variables.$baseFontSizeMd);
    }
}

.sp6{
    @include mixins.fontSize(18,30);
}

.sp7{
    color: variables.$cDark;
    @include mixins.fontSize(14,25);
}

.firstLetter{
    position: relative;
    padding-left: 45px;

    &_letter{
        position: absolute;
        @include mixins.fontSize(60,60);
        font-family: variables.$ffC;
        font-weight: 300;
        color: variables.$cPrimary;
        top: -18px; left: -10px;
        text-align: right;
        width: 50px;
    }

    &_content{
        &::first-letter{
            outline: 1px solid red;
            margin-left: -16px;
            visibility: hidden;
            opacity: 0;
        }

        strong, b{
            color: variables.$cPrimary;
        }
    }

    // &::first-letter{
    //     @include fontSize(60,50);
    //     font-family: $ffC;
    //     font-weight: 300;
    //     color: $cPrimary;
    //     // top: -5px;
    //     // left: 0;
    // }
}