.credits-highlight {
    border: 1px solid rgb(50 115 235 / 20%);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(59 130 246 / 10%), rgb(139 92 246 / 10%));
}

.credits-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
}

.credits-note {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: rgb(0 0 0 / 20%);
}

.credits-subhead {
    margin: var(--space-xl) 0 0;
    color: var(--text-primary);
    font-size: var(--fs-lead);
}

.credit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--credit-min, 250px)), 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.credit-grid--service {
    --credit-min: 300px;
}

.credit-grid--compact {
    --credit-min: 220px;
}

.credit-card {
    --credit-tint: 50 115 235;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 2%);
}

.credit-card--violet {
    --credit-tint: 139 92 246;
}

.credit-card--blue {
    --credit-tint: 59 130 246;
}

.credit-card--amber {
    --credit-tint: 234 179 8;
}

.credit-card--green {
    --credit-tint: 16 185 129;
}

article.credit-card {
    border-top: 3px solid rgb(var(--credit-tint) / 60%);
}

.credit-card--maker {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.credit-card__top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.credit-card__title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-lead);
}

.credit-card__title a,
.credit-card__name a,
.credit-card__attribution a,
.credit-card__licence a,
.credit-list a {
    color: var(--primary-ink);
    text-decoration: none;
}

.credit-card__title a:hover,
.credit-card__name a:hover,
.credit-card__attribution a:hover,
.credit-card__licence a:hover,
.credit-list a:hover {
    text-decoration: underline;
}

.credit-card__name {
    color: var(--text-primary);
}

.credit-card__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
}

.credit-card__attribution {
    margin: 0.25rem 0 0;
    font-size: var(--fs-small);
}

.credit-card__licence {
    color: var(--text-muted);
    font-size: var(--fs-tiny);
}

.credit-role {
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-md);
    background: rgb(var(--credit-tint) / 14%);
    color: rgb(var(--credit-tint));
    font-size: var(--fs-tiny);
    font-weight: 600;
    white-space: nowrap;
}

.credit-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.credit-link {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--primary-ink);
    text-decoration: none;
}

.credit-link:hover {
    text-decoration: underline;
}

.credit-link .material-symbols-rounded {
    font-size: 1.1em;
}

.credit-list {
    margin: var(--space-md) 0 0;
    padding-left: 1.2rem;
    line-height: var(--lh-loose);
}

.credit-list li + li {
    margin-top: 0.35rem;
}

.credits-trademark {
    margin-top: var(--space-md);
}