/************************
COLLECTION
************************/
.collection {
    border-radius: var(--border-radius);
    overflow: hidden;
}
.collection--700 {background: var(--background-700);}
.collection--900 {background: var(--background-900);}
/* COLLECTION HEADER */
.collection__header {
    padding: var(--spacing-m);
    padding-right: var(--spacing-grid);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-m);
    cursor: pointer;
}
.collection__header h2 {
    text-transform: capitalize;
    font-size: var(--font-size-header);
}
.collection__header small {
    color: var(--color-text);
    opacity: .5;
}
.collection__header:before {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(0.75*var(--border-radius));
    color: var(--color-primary);
    font-size: 1.5rem;
}
.collection--700 .collection__header:before {background: var(--background-900);}
.collection--900 .collection__header:before {background: var(--background-700);}
.collection__header--guide:before {content: "\f1ea"; color: var(--color-primary);}
.collection__header--rules:before {content: "\f0e3"; color: var(--color-danger);}
/* COLLECTION BODY */
.collection__body {
    border-top: var(--border);
    padding: var(--spacing-m);
    display: grid;
    gap: var(--spacing-s);
}
.collection--700 .collection__body{border-color: var(--background-900);}
.collection--900 .collection__body{border-color: var(--background-700);}
.collection__item {
    display: block;
    padding: var(--spacing-m) var(--spacing-grid);
    border-radius: calc(var(--border-radius) * 0.75);
    font-weight: bold;
    color: var(--color-title);
    transition: var(--transition);
}
.collection--700 .collection__item:hover {background: var(--background-900);}
.collection--900 .collection__item:hover {background: var(--background-700);}