:root {
    --resource-grid-gap: 3em;
}

.navbar {
    --bs-navbar-padding-x: 1rem;
}

.resource-grid {
    display: grid;
    gap: var(--resource-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
}

.resource-browser .resource-grid {
    margin-top: 1.5em;
}

.resource-browser .pagination {
    margin-top: var(--resource-grid-gap);
    justify-content: center;
}

.resource-card {
    /* border: none; */
    border-radius: 10px;
}

.resource-card .card-title {
    color: var(--bs-body-color);
    font-weight: bold;
}

.resource-card .card-text {
    color: var(--bs-secondary-color);
}

.resource-card a {
    text-decoration: none;
    color: inherit;
}

.resource-card .type-tag {
    text-transform: uppercase;
    /* Explicit colours here, independent of theme. */
    background-color: rgba(0, 0, 0, 0.65);
    color: whitesmoke;
    padding: 0 0.3em;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}

.resource-card .thumbnail {
    background-size: cover;
    aspect-ratio: 16 / 9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}

.resource-card .card-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}