Sample SASS files

_singlePost.scss

body.custom-single {

    .site-container {
    
        .site-inner {
            padding: 0;

    
            .entry-header {

                .featured-image {
                    display: flex;
                    align-items: center;
                    max-width: 100vw;
                    max-height: 320px;
                    overflow: hidden;
                    margin-left: calc(-100vw / 2 + 100% / 2);
                    margin-right: calc(-100vw / 2 + 100% / 2);
                    @include media-breakpoint-up(md) {
                        max-height: 50vh;
                    }

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .entry-title {
                    display: block !important;
                    text-align: center;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    padding-left: $global-padding-mobile;
                    padding-right: $global-padding-mobile;
                    @include media-breakpoint-up(md) {
                        margin-bottom: 1.5rem;
                        padding-left: $global-padding-desktop-extra;
                        padding-right: $global-padding-desktop-extra;
                    }
                }
    
                .entry-meta {
                    margin-bottom: 3rem;
                    line-height: 1;
                    text-align: center;

                    time {
                        color: $fortinetDarkGrey;
                        font-size: var(--wp--preset--font-size--headline-h-4); 
                        line-height: clamp(1.05875rem, 0.6514rem + 0.8486vw, 1.5rem);
                        font-weight: 700;
                        text-transform: uppercase;
                        letter-spacing: 2px;
                        @include media-breakpoint-up(md) {
                            letter-spacing: 3px;
                        }
                    }
                }
    
            }
    
        }

    }

}

_typography.scss

@import "partials/variables";

/* # Typography
---------------------------------------------------------------------------------------------------- */

html,
body {
    font-family: $font-body;
    font-weight: normal;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, 
h2 {
    font-family: $font-headings !important;
}

h3, 
h4, 
h5, 
h6 {
    font-family: $font-headings-alt !important;
}

/* Items with Bottom Margin */
h1, 
h2, 
h3, 
h4, 
h5, 
h6,
p,
ul,
ol,
cite,
blockquote,
table {
    margin-bottom: 1rem;
}

// Font sizes generated by the Fluid Typography settings in theme.json
// Line height generated with this tool: https://clamp.font-size.app/
// settings: Min Viewport: 768px | Max Viewport: 1600px

h1 { 
    font-size: var(--wp--preset--font-size--headline-h-1); 
    line-height: clamp(2.625rem, 1.875rem + 1.5625vw, 3.4375rem);
}

h2 { 
    font-size: var(--wp--preset--font-size--headline-h-2); 
    line-height: clamp(2.375rem, 1.3942rem + 2.0433vw, 3.4375rem);
}

h3 { 
    font-size: var(--wp--preset--font-size--headline-h-3); 
    line-height: clamp(1.375rem, 0.7981rem + 1.2019vw, 2rem);
}

h4 { 
    font-size: var(--wp--preset--font-size--headline-h-4); 
    line-height: clamp(1.05875rem, 0.6514rem + 0.8486vw, 1.5rem);
}

h5 { 
    font-size: var(--wp--preset--font-size--headline-h-5); 
    line-height: clamp(0.9075rem, 0.8798rem + 0.0577vw, 0.9375rem);
}

h3,
h4,
h5 {
    letter-spacing: 2px;
    @include media-breakpoint-up(md) {
        letter-spacing: 3px;
    }
}

body, p { 
    font-size: var(--wp--preset--font-size--normal);
    line-height: clamp(1.375rem, 0.6827rem + 1.4423vw, 2.125rem);
}

// FontAwesome 6 icons.
.fa::before {
    /* removed font- based rules */
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.login::before {
    /* using style CSS custom property */
    font: var(--fa-font-solid);
    content: "\f007";
}

_variables.scss

$fortinetRed: #c9362c;
$color-black: #000;
$fortinetDarkGrey: #646464;
$fortinetMedGrey: #afafaf;
$fortinetGrey: #f5f5f5;
// $fortinetGreenBlue: #c3E0ddd1;
$fortinetDarkMint: #cee6e3;
$fortinetLightMint: #f0f7f6;
$fortinetGreenBlue: $fortinetDarkMint;
$fortinetTitleDarkGrey: $fortinetDarkGrey;
$fortinetLightGrey: #fbfbfb;
$color-white: #fff;
$mobile-nav-button: #d9d9d9;

$font-body: 'Inter', sans-serif;
$font-headings: 'Yrsa', serif;
$font-headings-alt: 'Inter', sans-serif;
$font-primarynav: $font-body;
$font-buttons: $font-body;

$global-padding-mobile: 2rem;
$global-padding-desktop: 3rem;
$global-padding-mobile-extra: 2rem;
$global-padding-tablet: 4rem;
$global-padding-desktop-extra: 5rem;

// Responsive breakpoints.
$grid-breakpoints: (
    xs: 0,
    sm: 600px,
    md: 1023px,
    hdr: 1100px, // header
    lg: 1200px,
    xl: 1600px,
    xxl: 2000px,
    xxxl: 2800px
);

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($breakpoints, $name);
    @return if($min != 0, $min, null);
}
  
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    @if $min {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}