.introduction {
    max-width: 90%;
    height: 100%;
    min-height: calc(95vh - 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.introduction h5 {
    font-family: var(--body-font);
    line-height: 1.5;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: clamp(0.1rem, 1vw, 0.6rem);
    color: var(--c12);
    text-align: center;
}

.introduction h1 {
    color: var(--c11);
    font-family: "Anton", sans-serif;
    font-size: var(--text-title-xxxl);
    line-height: 1.1;
    max-width: 100%;
    margin: 0.5rem auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    transition: color 0.3s;
    letter-spacing: -.03em;
}

.introduction .intro-position {
    font-family: var(--body-font);
    line-height: 2.4rem;
    font-size: var(--text-small-p);
    text-transform: uppercase;
    letter-spacing: clamp(0.1rem, 0.5vw, 0.4rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

.introduction .intro-position span {
    font-family: "Anton", sans-serif;
    display: inline-block;
    position: relative;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    font-weight: 400;
    font-style: normal;
}

.introduction .intro-position span:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: 0;
    transform: translateX(50%);
    font-weight: 300;
}

.brand-description {
    margin-bottom: 20px;
    text-align: left;
}

.brand-title {
    font-size: var(--text-big-p);
    font-weight: var(--font-very-bold);
    color: var(--c11);
    margin-bottom: 8px;
    max-width: 800px;
    letter-spacing: var(--letter-tight);
}

.brand-subtitle {
    font-size: var(--text-big-p);
    color: var(--c11);
    font-weight: 400;
    line-height: 1.4;
    max-width: 800px;
    text-transform: uppercase;
    letter-spacing: var(--letter-tight);
}

.year {
    font-size: var(--text-big-p);
    color: var(--c11);
    margin-left: 10px;
}

/* Tablet and up */
@media screen and (min-width: 800px) {
    .introduction .intro-position span {
        padding: 0 clamp(0.75rem, 2vw, 1rem);
    }
}

/* Large desktop */
@media screen and (min-width: 1200px) {
    .introduction h5 {
        letter-spacing: 0.6rem;
    }

    .introduction .intro-position {
        letter-spacing: 0.4rem;
    }
}