html,body {
    color: #000;
    font: normal normal 300 clamp(12px, 2vw, 14px)/clamp(13px, 2.5vw, 16px) Lato, sans-serif;
    line-height: normal;
    font-weight: 300 !important;
}

h1 {
    font: normal normal 300 clamp(32px, 5vw, 40px)/clamp(40px, 6vw, 50px) "Cormorant Garamond", sans-serif;
    text-transform: uppercase;
    font-weight: 300 !important;
}

h2 {
    font: normal normal 300 clamp(24.8px, 4.2vw, 32px)/clamp(30px, 5vw, 40px) "Cormorant Garamond", sans-serif;
    font-weight: 300 !important;
}

h3 {
    font: normal normal 400 clamp(18.6px, 3.5vw, 24.8px)/clamp(24px, 4vw, 30px) "Cormorant Garamond", sans-serif;
    font-weight: 300 !important;
}

h4 {
    font: normal normal 300 clamp(14.8px, 2.8vw, 18.6px)/clamp(20px, 3.5vw, 24px) "Cormorant Garamond", sans-serif;
    font-weight: 300 !important;
}

h5 {
    font: normal normal 300 clamp(11.4px, 2.2vw, 14.8px)/clamp(16px, 3vw, 20px) "Cormorant Garamond", sans-serif;
    font-weight: 300 !important;
}

h6 {
    font: normal normal 300 clamp(9.6px, 2vw, 12px)/clamp(14px, 2.5vw, 16px) "Cormorant Garamond", sans-serif;
    font-weight: 300 !important;
}

p {
    font: normal normal 300 clamp(12px, 2vw, 14px)/clamp(13px, 2.5vw, 16px) Lato, sans-serif;
    line-height: normal;
    font-weight: 300 !important;
}

@layer components {
    .text-section-title {
        font-family: var(--font-heading);
        @apply text-3xl md:text-4xl lg:text-5xl tracking-wide;
    }

    .text-section-subtitle {
        @apply text-sm uppercase tracking-[0.25em] text-muted-foreground;
    }
}

.simple-page{
    padding-right: 15rem;
    padding-left: 15rem;
}

.legal > a {
    font-weight: 200;
    font-size: x-small;
}

@media screen and (width <= 768px) {
    .simple-page{
        padding-right: 1rem;
        padding-left: 1rem;
    }
}