@use "../abstracts/mixins";
@use "../abstracts/variables";

.number{
    position: relative;
    border-top: 2px solid variables.$cLight;
    color: variables.$cLight;
    padding-top: 2vh;
    opacity: 0.3;
    transition: opacity 0.4s linear;

    @include mixins.respondTo('xs'){
        opacity: 1;
    }

    &.active{
        opacity: 1;
    }

    & + .number{
        margin-top: 9vh;
    }

    &_pad{
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        color: variables.$cPrimary;
    }

    &_value{
        margin-top: 3vh;
        @include mixins.fontSize(140,110);
        font-family: variables.$ffC;


        @include mixins.respondTo('md'){
            @include mixins.fontSize(80,80,variables.$baseFontSizeXs);
        }

        @include mixins.respondTo('xs'){
            @include mixins.fontSize(65,65,variables.$baseFontSizeXs);
            margin-top: 1.5vh;
            letter-spacing: -0.05em;
            width: 110%;
        }
    }

    &_content{
        margin-top: 2vh;
        color: #878787;
        @include mixins.fontSize(20,32);

        @include mixins.respondTo('xs'){
            margin-top: 1.5vh;
            @include mixins.fontSize(14,22,variables.$baseFontSizeXs);
            margin-left: 20px;
            margin-right: 20px;
        }
    }
}