.divTop{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 45px 0;
}
.divTop .title{
font-size: 32px;
font-weight: 700;
}

.box_projects{
background-color: #FFFFFF;
}
.box_projects .div_projects{
width: 1430px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 50px 15px 40px;
}
.projects{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}

.projects>a{
display: block;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.projects>a.show {
opacity: 1;
transform: translateY(0);
}

.projects .imgP{
overflow: hidden;
position: relative;
border-radius: 20px;
}
.projects .imgP:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
background-repeat: no-repeat;
background-size: 100% 50%;
background-position: top;
background-color: rgba(0,0,0,0);
transition:
        background-size 0.5s ease-out,
        background-color 0.5s ease-out;
z-index: 1;
}
.projects .aCat:hover .imgP:after{
background-size: 100% 100%;
background-color: rgba(0,0,0,0.5);
}

.projects .imgP img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
transition: all 0.5s ease-out 0s;
transform: scale(1.1);
}


.projects .aCat.show .imgP img {
transform: scale(1);
}
.projects .aCat:hover .imgP img{
transform: scale(1.1);
}

.projects .imgP .zajawkaTytul{
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 3;
}
.projects .imgP .zajawkaTytul .tytulArticle{
font-size: 25px;
font-weight: 700;
color: #fff;
padding: 35px 130px 5px 35px;
box-sizing: border-box;
display: block;
text-transform: uppercase;
line-height: 1.2em;
}

@media screen and (max-width:1200px){
.projects .imgP .zajawkaTytul .tytulArticle{font-size: 28px;}
.projects{gap: 20px;grid-template-columns: repeat(2, 1fr);}
.divTop .title{font-size: 24px}

}

@media screen and (max-width:960px){
.catArticle{gap: 10px;flex-wrap: nowrap;flex-direction: column}
}
@media screen and (max-width:750px){
.projects .imgP .zajawkaTytul .tytulArticle{font-size: 20px;}
.divTop{flex-direction: column}

.divTop .title{margin-bottom: 20px}
}