/* ==========================================================================
   TITLES
========================================================================== */
// Huge
.title-huge {
    font-size: clamp(200px, 38vw, 700px);
    font-family: $font-serif;
    font-weight: 200;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

// House Name
.title-image {
    font-size: rem(40px);
    font-family: $font-serif;
    line-height: 1;
    color: $color-secondary;

    @include bp (sm) {
        font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
    }

}

// House Number
.title-index {
    font-size: rem(80px);
    font-family: $font-serif;
    letter-spacing: -0.05em;
    font-weight: 200;
    line-height: 1;
    color: rgba($color-tertiary, 0.6);

    @include bp (sm) {
        font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
    }
}

// Medium
.title-medium {
    font-family: $font-serif;
    font-size: rem(26px);
    line-height: 1.3;
    font-weight: 400;

    @include bp (sm) {
        font-size: rem(32px);
    }
}

// Small
.title-small {
    color: $color-secondary;
    font-size: rem(24px);
    font-weight: 400;
    line-height: 1.5;
    font-family: $font-serif;

    @include bp (sm) {
        font-size: rem(28px);
    }
}



/* ==========================================================================
   TEXT
========================================================================== */
// Large
.text-large {
    font-size: rem(32px);
    font-family: $font-sans;
    font-weight: 400;
    line-height: 1.5;
}

// Medium
.text-medium {
    font-size: rem(20px);
    font-family: $font-sans;
    font-weight: 200;
    line-height: 1.4;

    @include bp (sm) {
        font-size: rem(24px);
        line-height: 1.5;
    }
    @include bp (md) {
        font-size: rem(28px);
    }
}

// Normal
.text-normal {
    font-size: rem(22px);
    font-weight: 400;
    line-height: 1.5;
}

// Small
.text-small {
    font-size: rem(20px);
    font-weight: 400;
    line-height: 1.5;
}

// Photo date
.text-date {
    font-size: rem(14px);
    line-height: 1.3;

    @include bp (sm) {
        font-size: rem(16px);
        line-height: 1.4;
    }
}

// Label
.text-label {
    font-size: rem(12px);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}