Съехало изображение на Google Chrome, кроссбраузерность
На FireFox все идеально. Но на Google Chrome, поехало.
.block1{
display: block;
align-items: center;
justify-content: center;
flex-direction: row;
margin-top: 10.5px;
margin-left: 7.5px;
margin-right: 7.5px;
width: 120px;
height: auto;
border-radius: 10px;
background: rgb(255, 255, 255);
background:linear-gradient(145deg,#141414,#2d2d2d);
box-shadow: 1px 1px 7px #000000,-1px -1px 7px #2b2b2b;
}
.block1 .photo {
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
width: 100%;
height: 100px;
}
.photo .avatarka {
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
-webkit-filter: drop-shadow(0px 0px 5px#000000df);
filter: drop-shadow(0px 2px 5px #000000df);
}
.block_status{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
.block_status{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
.block1 .info {
display: block;
align-items: center;
justify-content: center;
flex-direction: row;
width: 100%;
font-weight: 600;
height: auto;
margin-top: 5px;
}
.block_opisanie {
display: flex;
flex-flow: row wrap;
margin-top: 7px;
padding: 0;
list-style: none;
width: 100%;
height: auto;
}
.info .zadanie {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
font-weight: 600;
height: auto;
font-size: 20px;
color: #007bff;
text-shadow: 0px 2px 2px #0000005d;
}
.ball {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-weight: 600;
height: 20px;
margin-top: 8px;
text-shadow: 0px 2px 2px #0000005d;
}
.ball i {
font-weight: 600;
color: #ffc107;
font-size: 20px;
margin-right: 4px;
}
.opisanie {
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 5px;
width: 100%;
color: rgba(255, 255, 255, 0.572);
text-shadow: 0px 2px 2px #0000005d;
font-size: 15px;
font-weight: 100;
height: auto;
}
.avatarka {
font-size: 90px;
}
.avatarka_mini {
position: absolute;
display: flex;
justify-content: end;
align-items: flex-end;
justify-content: end;
margin-top: 55px;
margin-left: 55px;
width: auto;
height: 45px;
-webkit-filter: drop-shadow(0px 0px 5px#000000df);
filter: drop-shadow(0px 2px 5px #00000088);
z-index: 3;
}
<div class="block1"> <!--ДЕРЕВО-->
<div class="photo">
<img src="img/mine_icon/Дубовая_древесина.png" class="avatarka_mini">
<img src="img/mine_icon/Красная_пыль.png" class="avatarka">
</div>
<div class="block_status">
<div class="info">
<div class="zadanie"><h>Ферма дерева</h></div>
<div class="ball"><i class="fas fa-award"></i>1.5 Балла</div>
</div>
<div class="block_opisanie">
<div class="opisanie"><h></h></div>
</div>
</div>
</div>

