.text-xl {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-xl);
    font-weight: var(--extralight);
    padding: 0;
    margin: 0;
}
.text-lg {
    font-family: var(--font-family);
    font-size: var(--text-lg);
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-lg);
    font-weight: var(--light);
    padding: 0;
    margin: 0;
}
.text-md p,
.text-md {
    font-family: var(--font-family);
    font-size: var(--text-md);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-md);
    font-weight: var(--light);
    padding: 0;
    margin: 0;
}

.text-md + .text-md, 
.text-md p + p {
    margin-top: 2rem;
}


.text-sm {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
    font-weight: var(--extralight);
    padding: 0;
    margin: 0;
}
.text-xs {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--medium);
    padding: 0;
    margin: 0;
}
.text-2xs {
    font-family: var(--font-family);
    font-size: var(--text-2xs);
    line-height: var(--line-height-2xs);
    letter-spacing: var(--letter-spacing-2xs);
    font-weight: var(--regular);
    padding: 0;
    margin: 0;
}
.eyebrow {
    font-family: var(--font-family);
    font-size: var(--text-eyebrow);
    line-height: var(--line-height-eyebrow);
    letter-spacing: var(--letter-spacing-eyebrow);
    font-weight: var(--regular);
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;

    grid-column: 1 / -1;
    color: var(--green-30);   
}

.eyebrow-text-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    width: fit-content
}

.eyebrow-text-list.drawer-1 {
    margin-right: auto;
}
.eyebrow-text-list.drawer-2 {
    margin-right: auto;
    margin-left: auto;
    transform: translateX(12px);
}
.eyebrow-text-list.drawer-3 {
    margin-left: auto;
    transform: translateX(12px);

}

.eyebrow-text {
    font-family: var(--font-family);
    font-size: var(--text-eyebrow);
    line-height: var(--line-height-eyebrow);
    letter-spacing: var(--letter-spacing-eyebrow);
    font-weight: var(--regular);
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: var(--teal-20);
}

.eyebrow:has(+ *) {
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .text-md + .text-md, 
    .text-md p + p {
        margin-top: 1.2rem;
    }   
}
@media (max-width: 767px) {
    .text-md + .text-md, 
    .text-md p + p {
        margin-top: 1rem;
    }   
}


sup {
    font-size: 0.6em;
    vertical-align: super;
}

.italic {
    font-style: italic;
}

.uppercase {
    text-transform: uppercase;
}


.extralight {
    font-weight: var(--extralight);
}
.light {
    font-weight: var(--light);
}
.regular {
    font-weight: var(--regular);
}
.medium {
    font-weight: var(--medium);
}


.letter-spacing-none {
    letter-spacing: var(--letter-spacing-none);
}