


.grid__img h3 img {
    width: 40%;
    border: none;
    box-shadow: none;
}
    
    
/* .grid__img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    background-image: url(../img/pozharnaya_knopka.webp);
    background-size: cover;
}

.grid__img .card{
    margin: 15em 0;
}

.grid__img:nth-child(5n+2){
    align-items: center;
    background-image: url(../img/pozharnyy-audit.webp);
}
.grid__img:nth-child(5n+3){
    align-items: center;
    background-image: url(../img/proektirovanie-pozharnoy-signalizacii.webp);
}
.grid__img:nth-child(5n+4){
    align-items: center;
    background-image: url(../img/Protivopozhar-sistem.webp);
} */

/* .gallery__grid{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 7em;
} */

.grid-img{
    grid-area: a;
}

.gallery__grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
    "b1 b1 b2 b2 b2"
    "b3 b3 b3 b4 b4"
    "b5 b5 b6 b6 b6"
    "b7 b7 b7 b8 b8"
    "b9 b9 bA bA bA";
 /* "bB bB bB bD bD" */
    /* margin: 0 2em; */
}

.box{
    grid-area: b1;
    margin: 4rem 0;
    /* background-image: url(../img/Fon2.jpg);
    background-size: cover; */
    
}
.box:nth-child(5n+2){
    grid-area: b2;
    background-image:none;
}
.box:nth-child(5n+3){
    grid-area: b3;
    background-image:none;
}
.box:nth-child(5n+4){
    grid-area: b4;
    background-image:none;
}
.box:nth-child(5n+5){
    grid-area: b5;
    background-image:none;
}
.box:nth-child(5n+6){
    grid-area: b6;
    background-image:none;
}
.box:nth-child(5n+7){
    grid-area: b7;
    background-image:none;
}
.box:nth-child(5n+8){
    grid-area: b8;
    background-image:none;
}
.box:nth-child(5n+9){
    grid-area: b9;
    background-image:none;
}
.box:nth-child(5n+10){
    grid-area: bA;
    background-image:none;
}

.grid__img{
    display: flex;
    flex-direction: row;
    /* margin: 1em 0; */
}
.grid__img img{
    width: 98%;
    border: 0.5rem solid  #515151;
    border-radius: 1rem;
    margin: 0.5rem;
    box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);
}
.grid__img .card{
    /* position: absolute; */
    top: 450px;
    left: 72px;
    width: 35%;
}
.grid__img .card span {
    color: #fff;
    font-size: 30px;
    line-height: 55px;
    background: rgba(0, 0, 0, 0.7);
    background: #000;
    padding: 10px;
    }
.grid__card{

}
.grid__card .card{
    width: 100%;
    height: 100%;
	background-color: rgba(46, 31, 31, 0.2);
	padding: 30px;
	border-radius: 20px;
	backdrop-filter: blur(3px);
    /* transform-style: preserve-3d;
    transform: perspective(800px); */
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);
	/* font-family: sans-serif; */
	color: rgb(255, 255, 255);
	line-height: 1.4;
	/* text-shadow: -1px -1px 2px rgba(0,0,0,.7); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid__card p{
    font-size: x-large;
}
.grid__card li{
    font-size: x-large;
}

@media (max-width: 1000px) {
    .gallery__grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas:
        "b1 b1 b1 b1 b1"
        "b2 b2 b2 b2 b2"
        "b4 b4 b4 b4 b4"
        "b3 b3 b3 b3 b3"
        "b5 b5 b5 b5 b5"
        "b6 b6 b6 b6 b6"
        "b8 b8 b8 b8 b8"
        "b7 b7 b7 b7 b7"
        "b9 b9 b9 b9 b9"
        "bA bA bA bA bA";
    }
    .grid__img img{
        width: 100%;
        border: 0.5rem solid  #000000;
        border-radius: 1rem;
        margin: 0.5rem;
    }
    .grid__img .card{
        width: 100%;
    }
    .grid__card p{
        font-size: large;
    }
    .grid__card li{
        font-size: large;
    }
    
    .box{
        margin: 1rem 0;
    
    }
}