commerce/src/styles/_utilities.scss

@layer utilities {
    .heading-1 {
        font-size: 4.8rem;
        line-height: 5.6rem;
        letter-spacing: -0.03em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 6.4rem;
            line-height: 8rem;
            letter-spacing: -0.03em;
        }
    }
    .heading-2 {
        font-size: 4rem;
        line-height: 4.8rem;
        letter-spacing: -0.02em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 4.8rem;
            line-height: 5.6rem;
            letter-spacing: -0.02em;
        }
    }
    .heading-3 {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.01em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 3.2rem;
            line-height: 4rem;
            letter-spacing: -0.01em;
        }
    }

    .sm-headline {
        font-size: 1.8rem;
        line-height: 2.8rem;
        letter-spacing: -0.01em;
        @screen md {
            font-size: 2rem;
            line-height: 2.8rem;
            letter-spacing: -0.01em;
        }
    }

    .sub-headline {
        font-size: 2rem;
        line-height: 2.8rem;
        letter-spacing: -0.01em;
        @screen md {
            font-size: 2.4rem;
            line-height: 3.2rem;
            letter-spacing: -0.01em;
        }
    }

    .topline {
        font-size: 1.8rem;
        line-height: 2.8rem;
        letter-spacing: 0.01em;
        @screen md {
            font-size: 2rem;
            line-height: 2.8rem;
            letter-spacing: 0.01em;
        }
    }

    .caption {
        font-size: 1.2rem;
        line-height: 2rem;
        letter-spacing: 0.01em;
    }

    .sm-label {
        font-size: 1rem;
        line-height: 1.6rem;
    }
    .spacing-horizontal {
        padding-left: 2rem;
        padding-right: 2rem;
        @screen md {
            padding-left: 11.2rem;
            padding-right: 11.2rem;
        }
    }
    .spacing-horizontal-left {
        padding-left: 2rem;
        @screen md {
            padding-left: 11.2rem;
            padding-right: 11.2rem;
        }
    }
    .custom-border-radius {
        border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
    }

    .custom-border-radius-lg {
        border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%;
    }

    .font-heading {
        font-family: var(--font-heading);
    }

    .font-logo {
        font-family: var(--font-logo);
    }
}