#page-home {
    display: grid;
    overflow-y: scroll;
    gap: 16px;
    padding: 16px;
    align-content: start;
    .card-list {
        display: grid;
        padding: 16px;
        grid-template-columns: auto 1fr 1fr 1fr auto auto;
        gap: 16px;
        align-items: center;
        user-select: none;
        background-image: var(--img);
        background-size: 300px;
        background-repeat: no-repeat;
        background-position-y: -55px;
        background-position-x: 180px;
        border-radius: 16px;
        border-width: 1px;
        border-style: solid;

        &>*{pointer-events: none;}
        .numero {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            aspect-ratio: 1/1;
            font-weight: 900;

            background-image: var(--img-medalha);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .nome {
            font-size: 20px;
            border-radius: 4px;
            text-align: start;
        }
        &>:where(.numero, .nome):nth-child(-n+15) {
            animation: list .6s ease-in-out;
        }
    }
}