.cover-badges,
.project-badges {
    --icon-size: 70px;
    display: flex;
    justify-content: end;
}

.cover-badges {
    position: absolute;
    right: 1rem;
    top: 1.25rem;
    flex-direction: column;
    width: var(--icon-size);
    gap: 0.75rem;
}

.project-badges {
    position: relative;
    flex-direction: row;
    height: var(--icon-size);
    width: 100%;
    align-items: flex-end;
}
/* < 600px goto 60px icon size */
.badge {
    width: auto;
    height: calc(var(--icon-size) * var(--icon-scale, 1));
    max-width: unset;
    max-height: unset;
    padding: 0;
    aspect-ratio: 1;
    background-color: var(--badge-clr);
    flex-shrink: 0;
    padding: 0 !important;
}

.adcc-shortlist {
    mask: url("/assets/misc/adcc-shortlist.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/misc/adcc-shortlist.svg") no-repeat center /
        contain;
}

.adcc-bronze {
    mask: url("/assets/misc/adcc-bronze.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/misc/adcc-bronze.svg") no-repeat center / contain;
    /*background-color: #e98104;*/
}

.graphis-honorable {
    mask: url("/assets/misc/graphis-honorable.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/misc/graphis-honorable.svg") no-repeat center /
        contain;
}

.graphis-silver {
    mask: url("/assets/misc/graphis-silver.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/misc/graphis-silver.svg") no-repeat center /
        contain;
}

.cover-badges .graphis-silver,
.cover-badges .graphis-honorable {
    --icon-scale: 1.25;
}

@media (max-width: 600px) {
    .cover-badges {
        --icon-size: 50px;
        right: 0.5rem;
        top: 1rem;
        gap: 0.5rem;
    }
    .project-badges {
        --icon-size: 55px;
    }
}