битва фракций

[html]
<style>
section.fr-battle {
width: 880px;
height: 600px;
margin: auto !important;
background-image: url(https://forumstatic.ru/files/001c/be/3c/57008.png);
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px 21px ;
padding: 40px 50px 30px 70px;
}

section.fr-battle * {
box-sizing: border-box;
}

section.fr-battle > div {
width: 240px;
height: 235px;
padding-top: 78px;
position: relative;
}

section.fr-battle::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

section.fr-battle > div fighters {
display: flex;
flex-direction: column;
gap: 3px;
overflow: auto;
height: 151px;
}

section.fr-battle div fighters d {
display: flex;
position: absolute;
top: 1px;
left: -16px;
box-sizing: border-box;
width: 75px;
height: 22px;
transform: translate(-50%);
font: var(--fw400) var(--fs12) var(--font-cat-title);
color: rgba(255, 255, 255, 1);
line-height: 1;
border-radius: 6px;
background: rgb(var(--accent));
padding: 3px 10px 0 0px;
justify-content: center;
z-index: -1;
}

section.fr-battle div fighters div {
z-index: 2;
display: flex;
gap: 5px;
height: 22px;
width: fit-content;
position: relative;
align-items: flex-start;
color: rgb(var(--text-primary));
padding: 2px 10px 0;
font: 700 10px var(--font-cat-title);
box-sizing: border-box;
transition: var(--anim-hover);
justify-content: flex-start;
transition: .3s ease;
align-items: center;
margin-left: 60px;
}
section.fr-battle div fighters div a {
background: #f5f0eb;
/* z-index: 2; */
display: flex;
gap: 5px;
height: 22px;
width: fit-content;
position: relative;
width: 155px;
align-items: flex-start;
backdrop-filter: blur(4px);
color: black;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.5);
padding: 2px 10px 0;
font: 700 10px var(--font-cat-title);
box-sizing: border-box;
transition: var(--anim-hover);
justify-content: flex-start;
transition: .3s ease;
}

section.fr-battle div fighters div a:hover {
background: white;
}

section.fr-battle > div ttl {
font-family: Playfair Display;
font-weight: 700;
font-size: 16px;
line-height: 121%;
letter-spacing: -5%;
color: rgba(51, 51, 51, 1);
position: absolute;
width: 120px;
left: 93px;
top: 15px;
}

section.fr-battle > div > img.bf-img {
width: 121px;
height: 112px;
object-fit: contain;
position: absolute;
top: -22px;
left: -27px;
}

</style>