@layer components {
    .attendance {
        display: grid;
        gap: var(--space-2);
        justify-items: start;
    }

    .attendance-count {
        font-family: var(--font-data);
        font-size: var(--size-small);
        color: var(--soil-2);
    }

    .attendance-button .icon {
        width: 18px;
        height: 18px;
    }

    .attendance-active .icon {
        color: var(--wheat);
    }

    .attendance-privacy {
        font-size: var(--size-micro);
        color: var(--soil-2);
        max-width: 34ch;
    }

    .strip-card-going {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-family: var(--font-data);
        font-size: var(--size-small);
        color: var(--soil-2);
    }

    .strip-card-going .icon {
        width: 14px;
        height: 14px;
        color: var(--wheat);
    }

}