.resource-badge {
    width: 5em;
    height: 5em;
}

    .resource-badge .border {
        position: relative;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            0deg, 
            var(--highlight) 0%, 
            var(--highlight-dark-1) 50%, 
            var(--highlight-light-1) 100%);
        border-radius: 50%;
        overflow: hidden;
        padding: .2em;
        transition: 250ms ease;
    }

        .resource-badge .background {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgb(30,30,30) 0%, rgb(55,55,55) 100%);
            border-radius: 50%;
            overflow: hidden;
            padding: .5em;
        }

        .resource-badge .image {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }

        .resource-badge.group-badge {
            width: 4.5em;
            height: 4.5em;
        }

        .group-badge .border {
            border-radius: 1.25em;
            padding: .25em;
            transform: rotateZ(45deg);
            background: linear-gradient( 
                -45deg, 
                var(--highlight) 0%, 
                var(--highlight-dark-1) 50%, 
                var(--highlight-light-1) 100%);
        }

        .group-badge .background {
            border-radius: 1em;
        }

        .group-badge .image {
            transform: rotateZ(-45deg);
        }