/* css/about.css */
@layer components {

/* ABOUT */
.about-grid {
    display: grid;

    grid-template-columns: 1.35fr 0.65fr;

    border: 1px solid var(--line);
}

.about-copy {
    padding: 42px;

    background: var(--charcoal);
}

.about-copy p {
    margin-bottom: 22px;

    color: var(--gray);

    font-size: 1.18rem;

    line-height: 1.75;
}

.about-copy p:last-child {
    margin-bottom: 0;
}

.about-specs {
    background: var(--white);
}

.spec-row {
    padding: 24px;

    border-bottom: 1px solid #c7c7c3;
}

.spec-row:last-child {
    border-bottom: 0;
}

.spec-row span {
    display: block;

    margin-bottom: 5px;

    color: #555;

    font-size: 0.8rem;
    font-weight: 900;
}

.spec-row strong {
    color: var(--black);

    font-size: 0.98rem;
}

.lime-spec {
    background: var(--lime);
}

.purple-spec {
    background: var(--purple);
}

.purple-spec span {
    color: rgba(255, 255, 255, 0.72);
}

.purple-spec strong {
    color: var(--lime);
}

}