.box_article{
padding: 50px 45px 0px 45px;
box-sizing: border-box;
width: 2010px;
margin: 0px auto;
max-width: 100%;
}
.box_article .div_article{

}

.box_article .div_article .content{
display: grid;
grid-gap: 48px 48px;
grid-template-columns: 2.1fr 1fr 1fr;
}
.box_article .div_article .content>div{
box-sizing: border-box;
}

.box_article .div_article .content>div .art{
box-sizing: border-box;
padding-bottom: 48px;
}
.box_article .div_article .content>div .art a{
display: block;
background-color: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 30px 40px rgba(0,0,0,0.08);
height: 100%;
transition:all 0.5s ease-out 0s;
}

.box_article .div_article .content>div .art a:hover{
box-shadow: 0px 30px 40px rgba(0,0,0,0);
}


.box_article .div_article .content>div.col1{
display: flex;
flex-wrap: wrap;
}

.box_article .div_article .content>div.col1 .art{
width: 50%;

}

.box_article .div_article .content>div.col1 .art:nth-child(2){
padding-right: 24px;
}
.box_article .div_article .content>div.col1 .art:nth-child(3){
padding-left: 24px;
}

.box_article .div_article .content>div.col1 .art:first-child{
width: 100%;
}

.box_article .div_article .content>div.col1{

}
.box_article .div_article .content>div.col1{

}

.box_article .div_article .content>div img{
max-width: 100%;
height: auto;
}


.box_article .div_article .tekst{
box-sizing: border-box;
padding: 30px 45px 60px 45px;
color: #000000;
}

.box_article .div_article .tekst .title{
font-family: var(--gfont2-family);
font-size: 20px;
font-weight: 700;
padding-bottom: 30px;
margin-bottom: 30px;
position: relative;
line-height: 1.7em;
transition:all 0.5s ease-out 0s;
}

.box_article .div_article a:hover .tekst .title{
color: var(--g1-color);
}


.box_article .div_article .tekst .title:after{
content: "";
display: block;
position: absolute;
left: 0px;
bottom: 0px;
width: 60px;
height: 1px;
background-color: #000000;
transition:all 0.5s ease-out 0s;
}
.box_article .div_article a:hover .tekst .title:after{
width: 100%;
}

.box_article .div_article .tekst .zajawka{
font-weight: 400;
font-size: 18px;
line-height: 1.5em;
}

@media screen and (max-width:1720px){
.box_article{padding: 30px 15px 0px 15px;}
.box_article .div_article .content {grid-gap: 20px 20px;}
.box_article .div_article .content > div .art{padding-bottom: 20px}
.box_article .div_article .content > div.col1 .art:nth-child(2){padding-right: 10px;}
.box_article .div_article .content > div.col1 .art:nth-child(3) {padding-left: 10px;}
}
@media screen and (max-width:1580px){
.box_article .div_article .tekst{padding: 20px;}
.box_article .div_article .tekst .title{font-size: 17px;line-height: 1.5em;padding-bottom: 15px;margin-bottom: 15px;}
.box_article .div_article .tekst .zajawka {font-size: 16px}
}

@media screen and (max-width:1260px){
.box_article .div_article .content{display: flex;flex-wrap: wrap}
.box_article .div_article .content > div.col3{display: flex;width: 100%;grid-gap:0px 0px}
.box_article .div_article .content > div.col1{width: 50%}
.box_article .div_article .content > div.col2{width: 50%}
.box_article .div_article .content {grid-gap: 0px 0px;}

.box_article .div_article .content > div .art{padding: 10px}
.box_article{padding: 30px 0px 0px 0px;}
}

@media screen and (max-width:800px){
.box_article .div_article .content > div.col1{width: 100%}
.box_article .div_article .content > div.col2{width: 100%}
}
@media screen and (max-width:480px){
.box_article .div_article .content > div.col1 .art{width: 100%}
.box_article .div_article .content > div .art{width: 100%}
.box_article .div_article .content > div.col3{flex-wrap: wrap}
}