@font-face {
    font-family: 'season-mix-regular';
    src: url('../../fonts/SeasonMix-Regular.woff2') format('woff2'),
         url('../../fonts/SeasonMix-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* FONT FAMILY */
.season {
    font-family: 'season-mix-regular', sans-serif;
}


/* COLORS */
.black {
    color: var(--black);
}

.white {
    color: var(--white);
}


/* LAYOUT */
.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* SIZE */
.p1 {
    /* 12px */
    font-size: 1em;
    line-height: 1;
}

.p2 {
    /* 20px / 30px */
    font-size: 1.67em;
    line-height: 1.5;
}

.p3 {
    font-size: 5.4em;
    line-height: 1.196;
}



@media only screen and (max-width: 1024px) {
    .p2 {
        font-size: 2.1em;
    }

    .p3 {
        font-size: 6em;
    }
}


@media only screen and (max-width: 740px) {
    .p1 {
        font-size: 1em;
    }

    .p2 {
        font-size: 1.31em;
        line-height: 1.5;
    }

    .p3 {
        font-size: 5.37vw;
        line-height: 1.3;
    }
}


@media only screen and (max-width: 550px) {
    .p2 {
        font-size: 1.71em;
        line-height: 1.5;
    }

    .p3 {
        font-size: 6.4vw;
        line-height: 1.24;
    }
}


@media only screen and (max-width: 370px) {
    .p1 {
        font-size: 7px;
    }

    .p2 {
        font-size: 12px;
    }
}