.tb-lister {
    --tb-lister-columns: 3;
    --tb-lister-gap: var(--tb-spacing-60);
    --tb-lister-gap-count: calc(var(--tb-lister-columns) - 1);
    width: 100%;
    max-width: var(--tb-breakpoint-large);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tb-spacing-60);
    padding: 0 var(--tb-spacing-60);
}

.tb-lister.tb-theme-yellow {
    color: var(--tb-color-yellow-800);
}

.tb-lister.tb-theme-blue {
    color: var(--tb-color-blue-800);
}

.tb-lister.tb-theme-green {
    color: var(--tb-color-green-800);
}

.tb-lister-content {
    width: 100%;
    max-width: var(--tb-breakpoint-medium);
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-60);
}

.tb-lister-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-spacing-20);
}

.tb-lister-header select {
    outline: none;
    border: 2px solid var(--tb-color-blue-800);
    border-radius: var(--tb-radius-33);
}

.tb-lister-header select:hover,
.tb-lister-header select:focus {
    border: 2px solid var(--tb-color-blue-500);
}

.tb-lister-header-item {
    display: flex;
    gap: var(--tb-spacing-10);
    align-items: center;
}

.tb-lister-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-lister-gap);
}

.tb-lister-tile {
    width: 100%;
    max-width: calc(
        100% / var(--tb-lister-columns) - var(--tb-lister-gap) * var(--tb-lister-gap-count) / var(--tb-lister-columns)
    );
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
    text-decoration: none;
}

.tb-lister-tile:hover {
    text-decoration: none;
}

.tb-lister-tile-header {
    display: flex;
    flex-direction: column;
}

.tb-lister-footer {
    display: flex;
    justify-content: center;
    gap: var(--tb-spacing-20);
}

@media (max-width: 1024px) {
    .tb-lister {
        --tb-lister-columns: 2;
        --tb-lister-gap: var(--tb-spacing-50);
        padding: 0 var(--tb-spacing-50);
    }

    .tb-lister-content {
        gap: var(--tb-spacing-50);
    }
}

@media (max-width: 768px) {
    .tb-lister {
        --tb-lister-columns: 1;
    }
}

@media (max-width: 500px) {
    .tb-lister {
        padding: 0 var(--tb-spacing-20);
    }

    .tb-lister-content {
        gap: var(--tb-spacing-20);
    }
}