.attendee-list {
    container-type: inline-size;
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid gainsboro;
    border-radius: 0.5rem;
    overflow: hidden;

    caption {
        margin-block-end: 1rem;
        text-align: left;
        font-weight: 600;
        color: var(--grey-dark);
    }

    thead {
        background-color: var(--color-1-desaturated);

        th {
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--grey-dark);
            border-bottom: 2px solid gainsboro;
        }
    }

    tbody {
        tr {
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s ease;

            &:last-child { border-bottom: none; }
            &:hover { background-color: var(--color-1-desaturated); }

            td {
                padding: 0.75rem 1rem;
                color: var(--gray);
            }
        }
    }

    @container (min-width: 30rem) {
        thead th { padding: 1rem 1.5rem; }
        tbody td { padding: 1rem 1.5rem; }
    }
}