/*-----------------
    # Extents
-----------------*/

// Heading
.heading,
%heading {
    font-weight: 800;
    color: var(--heading-color);
    font-family: var(--heading-font);
}
    
%h1 {
    @extend %heading;
    line-height: 1.11;
    font-size: $h1-size;
}

%h2 {
    @extend %heading;
    line-height: 1.3;
    font-size: $h2-size;
}

%h3 {
    @extend %heading;
    line-height: 1.32;
    font-size: $h3-size;
}

%h4 {
    @extend %heading;
    line-height: 1.3;
    font-size: $h4-size;
}

%h5 {
    @extend %heading;
    font-size: $h5-size;
}

%h6 {
    @extend %heading;
    line-height: 1.3;
    font-size: $h6-size;
}
    
%box-shadow {
    box-shadow: 0px 6px 20px rgba(48, 79, 121, 0.1);
}