.combat-values {
    margin-top: $margin-sm;
    .combat-value-with-formula {
        display: grid;
        place-items: center;
        $size: 60px;
        row-gap: $margin-sm;
        .combat-value {
            @include centered-content;
            height: $size;
            width: $size;
            flex: 0 0 auto;
            background-size: contain;
            font-size: 1.5em;
            &.hitPoints {
                background-image: url("#{$official-assets-path}/DS4-HP.png");
            }
            &.defense {
                background-image: url("#{$official-assets-path}/DS4-DEF.png");
            }
            &.initiative {
                background-image: url("#{$official-assets-path}/DS4-INI.png");
            }
            &.movement {
                background-image: url("#{$official-assets-path}/DS4-MR.png");
            }
            &.meleeAttack {
                background-image: url("#{$official-assets-path}/DS4-MAT.png");
            }
            &.rangedAttack {
                background-image: url("#{$official-assets-path}/DS4-RAT.png");
            }
            &.spellcasting {
                background-image: url("#{$official-assets-path}/DS4-SPC.png");
            }
            &.targetedSpellcasting {
                background-image: url("#{$official-assets-path}/DS4-TSC.png");
            }
        }

        .combat-value-formula {
            width: $size;
            input {
                text-align: center;
            }
        }
    }
}