.done { width: var(--fill); text-align: center; }

.art-hero {
    margin-inline: auto;
    width: var(--len-208);
    height: var(--len-208);
}

.done-head {
    margin-top: var(--len-20);
    font-family: var(--font-display);
    font-size: var(--fs-48);
    font-weight: var(--weight-bold);
    line-height: var(--lh-1);
    color: var(--charcoal);
}

.done-lead {
    margin: var(--len-20) auto 0;
    max-width: var(--len-512);
    font-size: var(--fs-14);
    line-height: var(--lh-15);
    color: var(--charcoal-m);
}

.done-grid {
    margin: var(--len-32) auto 0;
    display: grid;
    gap: var(--len-12);
    text-align: left;
}

.done-grid-one { max-width: var(--len-360); }

.done-grid-two { max-width: var(--len-760); }

.done-grid-three { max-width: var(--len-1160); }

.done-card {
    display: flex;
    min-height: var(--len-112);
    overflow: hidden;
    border-radius: var(--len-12);
    border: 1px solid var(--line);
    background-color: var(--white);
}

.done-tile {
    position: relative;
    display: flex;
    width: var(--len-136);
    flex-shrink: 0;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.tile-disc-large {
    width: var(--len-112);
    height: var(--len-112);
    transform: translateX(var(--tx-4-back));
}

.art-done {
    width: var(--len-150);
    height: var(--len-150);
    transform: translateX(var(--tx-8-back)) scale(var(--scale-110));
}

.done-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: var(--len-8) var(--len-20);
}

.done-name {
    font-family: var(--font-display);
    font-size: var(--fs-15);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-125);
    color: var(--charcoal);
}

.done-code {
    margin-top: var(--len-4);
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    color: var(--charcoal-m);
}

.done-facts {
    margin-top: var(--len-8);
    display: grid;
    gap: var(--len-4);
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    color: var(--charcoal-m);
}

.done-fact { display: inline-flex; align-items: center; gap: var(--len-6); }

.done-fact svg { width: var(--len-14); height: var(--len-14); flex-shrink: 0; }

.done-manage { margin-top: var(--len-8); display: flex; gap: var(--len-8); }

.done-share {
    margin: var(--len-48) auto 0;
    max-width: var(--len-680);
    font-size: var(--fs-14);
    line-height: var(--lh-15);
    color: var(--charcoal-m);
}

.done-actions {
    margin-top: var(--len-24);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--len-12);
}

.done-sent { margin: var(--len-20) auto 0; max-width: var(--len-680); }

.share-body { margin-top: 0; }

@media (min-width: 40rem) {
    .done-grid-two { grid-template-columns: repeat(var(--cols-2), minmax(0, 1fr)); }

    .done-grid-three { grid-template-columns: repeat(var(--cols-2), minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .done-grid-three { grid-template-columns: repeat(var(--cols-3), minmax(0, 1fr)); }
}