/* FONTS */
@font-face {
    font-family: 'Brandon Grotesque Regular';
    src:
        url('../../assets/fonts/subset-BrandonGrotesque-Regular.woff2') format('woff2'),
        url('../../assets/fonts/subset-BrandonGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque Medium';
    src:
        url('../../assets/fonts/subset-BrandonGrotesque-Medium.woff2') format('woff2'),
        url('../../assets/fonts/subset-BrandonGrotesque-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Canela Light';
    src:
        url('../../assets/fonts/subset-Canela-light.woff2') format('woff2'),
        url('../../assets/fonts/subset-Canela-light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* FONT FAMILY */
.canela {
    font-family: 'Canela Light', 'Times New Roman', Times, serif;
}

.brandon {
    font-family: 'Brandon Grotesque Regular', Arial, Helvetica, sans-serif;
}

.brandon-medium {
    font-family: 'Brandon Grotesque Medium', Arial, Helvetica, sans-serif;
}


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

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


/* 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 {
    font-size: 1em; /*12*/
    line-height: 1;
    letter-spacing: 0.02em;
}

.p2 {
    font-size: 1.167em; /*14*/
    line-height: 1;
    letter-spacing: 0.03em;
}

.p3 {
    font-size: 1.34em; /*16*/
    line-height: 1.3;
}

.p4 {
    font-size: 2.16em; /*26*/
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.p5 {
    font-size: 2.67em; /*32*/
    line-height: 1.1;
    letter-spacing: 0.03em;
}

.p6 {
    font-size: 3.33em; /*40*/
    line-height: 1.1;
    letter-spacing: 0.01em;
}


@media only screen and (max-width: 740px) {
    .p2 {
        line-height: 1.2;
    }

    .p4 {
        font-size: 1.66em; /*20*/
        line-height: 1.2;
        letter-spacing: 0.01em;
    }
    
	.p5 {
        font-size: 2.34em; /*28*/
        line-height: 1.2;
        letter-spacing: 0.01em;
    }

    .p6 {
        font-size: 2.66em; /*32*/
        line-height: 1.1;
        letter-spacing: 0.01em;
    }
}