.colles-list {
    --colla-card-min-width: 150px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--colla-card-min-width), 1fr));
    gap: 1rem;

    .colla-card {
        position: relative;
        background-color: var(--color-white);
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        box-shadow: var(--shadow-sm);
        border-radius: 0.75rem;

        &.colla-card-inactive {
            background-color: var(--color-gray-light);
        }

        .colla-view-more {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            width: 1.25rem;
            height: 1.25rem;
            background-color: var(--color-primary);
            color: var(--color-white);
            border-radius: 0.5rem;
            transition: background-color 0.3s;

            &:after {
                content: '+';
                font-size: 1.25rem;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            &:hover {
                background-color: var(--color-primary-light);
            }
        }

        .colla-escut {
            width: 6rem;
            height: 6rem;
            user-select: none;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .colla-name {
            width: 100%;
            font-size: 0.85rem;
            text-align: center;
            border-width: 2px 0;
            border-style: solid;
            padding: 0.25rem;

            > h3 {
                margin: 0;
                font-size: 0.9rem;
            }
        }

        ul.colla-details {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            flex: 1;

            & > :not(:last-child) {
                margin-block-end: 0.125rem;
            };

            li {
                font-size: 0.75rem;

                > span {
                    font-weight: 600;
                }
            }
        }

        .colla-links {
            width: 100%;
            display: flex;
            gap: 0.5rem;

            a {
                font-size: 1.2em;
                text-align: center;
                padding: 0.25rem 0;
                line-height: 0;
                border-radius: 0.5rem;
                flex: 1;
            }
        }
    }
}