.div_content{
width: 1530px;
max-width: 100%;
margin: 0px auto;
box-sizing: border-box;
padding: 0px 15px 60px 15px;
}

.ofertyDetail{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 30px 30px;
}
.ofertyDetail .oferta{
display: grid;
grid-template-rows: 1fr 1fr;
}

.ofertyDetail .oferta .spImg{
display: block;
text-align: center;
position: relative;
}
.ofertyDetail .oferta .spImg img{
max-height: 100%;
width: auto;
position: relative;
/*transition:all 0.5s ease-out 0s;*/
transform: translateX(-50%);
left: 50%;
max-width: unset;
height: auto;
}

.ofertyDetail .oferta:hover .spImg img{

}

.ofertyDetail .oferta .spImg>span{
display: inline-block;
position: relative;
}

.ofertyDetail .oferta .spImg>span:after,.ofertyDetail .oferta .spImg>span.imgSp:before{
content: "";
position: absolute;
bottom: -28px;
right: 28px;
width: 55px;
height: 55px;

}

.ofertyDetail .oferta .spImg>span.imgSp:after{
background-color: #FFFFFF;
border-radius: 50%;
box-shadow: 0px 0px 30px rgba(0,0,0,0.16);
}
.ofertyDetail .oferta .spImg>span.imgSp:before{
content: "\002b";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
color: var(--g1-color);
transition:all 0.5s ease-out 0s
}

.ofertyDetail .oferta:hover .spImg>span.imgSp:before{
color: var(--g2-color);
}

.ofertyDetail .oferta .spImg>span.imgSp span{
display: inline-block;
width: 85%;
overflow: hidden;
border-radius: 10px;
transition:all 0.5s ease-out 0s
}
.ofertyDetail .oferta:hover .spImg>span.imgSp span{
width: 100%;
}


.ofertyDetail .oferta .zajawkaDiv{
background-color: #FFFFFF;
padding: 32% 30px 60px 30px;
margin-top: -50%;
box-sizing: border-box;
}
.ofertyDetail .oferta .zajawkaDiv .titleOffer{
margin: 40px 0px 21px 0px;
display: block;
color: var(--gfont-color);
font-weight: 700;
font-size: 28px;
padding: 0px 0px 35px 0px;
position: relative;
transition:all 0.5s ease-out 0s
}

.ofertyDetail .oferta:hover .zajawkaDiv .titleOffer{
color: var(--g2-color);
}

.ofertyDetail .oferta .zajawkaDiv .titleOffer:after{
content: "";
display: block;
position: absolute;
left: 0px;
bottom: 0px;
width: 108px;
height: 11px;
background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iR3JvdXBfMTgzIiBkYXRhLW5hbWU9Ikdyb3VwIDE4MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTA3Ljg1MiIgaGVpZ2h0PSIxMC4xODEiIHZpZXdCb3g9IjAgMCAxMDcuODUyIDEwLjE4MSI+DQogIDxwYXRoIGlkPSJQYXRoXzEwMCIgZGF0YS1uYW1lPSJQYXRoIDEwMCIgZD0iTTY5LjI3NiwzNC42NThhMTcuNDgxLDE3LjQ4MSwwLDAsMS0xMS4yMjItNC4zMTljLTYuMjMzLTUuMTg4LTEzLjY2OS01LjE4Ni0xOS45LDAtNi45MjUsNS43NjQtMTUuNTI1LDUuNzYyLTIyLjQ0OCwwLTYuMjI5LTUuMTg0LTEzLjY2NS01LjE4Ni0xOS44OTUsMC02LjkyMSw1Ljc2NC0xNS41MjEsNS43NjYtMjIuNDQ4LDBhMSwxLDAsMCwxLS4xMjgtMS40MDYsMSwxLDAsMCwxLDEuNDA2LS4xMjhjNi4yMjksNS4xODQsMTMuNjY1LDUuMTgyLDE5Ljg5MywwLDYuOTIzLTUuNzYyLDE1LjUyMy01Ljc2NCwyMi40NDgsMCw2LjIyOSw1LjE4MiwxMy42NjUsNS4xODQsMTkuODkzLDAsNi45MjUtNS43NjQsMTUuNTI1LTUuNzY0LDIyLjQ0OCwwLDYuMjMxLDUuMTg2LDEzLjY2Nyw1LjE4NiwxOS44OTUsMEExLDEsMCwwLDEsODAuNSwzMC4zMzksMTcuNDgyLDE3LjQ4MiwwLDAsMSw2OS4yNzYsMzQuNjU4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjYuOTkyIC0yNC40NzcpIiBmaWxsPSIjMDBjZWI1Ii8+DQo8L3N2Zz4NCg==') 50% 50% no-repeat;
background-size: 100% auto;
}

.ofertyDetail .oferta .zajawkaDiv .zajawka{
color: var(--g3-color);
font-size: 15px;
font-weight: 400;
line-height: 1.6em;
}

@media screen and (max-width:1580px) {
.ofertyDetail .oferta .spImg img{width: 320px}
.ofertyDetail .oferta{max-width: 320px;justify-items: center}
.ofertyDetail .oferta .zajawkaDiv{margin-top: -60%}
}
@media screen and (max-width:1400px) {
.ofertyDetail .oferta .zajawkaDiv{margin-top: 0px;padding-top: 0px}
.ofertyDetail .oferta{display: block;background-color: #FFFFFF}
.ofertyDetail .oferta .spImg img{max-width: 100%;height: auto;width: 360px;left: 0px;transform: translateX(0%);transition:all 0.5s ease-out 0s;}
.ofertyDetail .oferta .spImg > span.imgSp span{width: 100%;overflow: hidden}
.ofertyDetail .oferta:hover .spImg img{transform: scale(1.1)}
.ofertyDetail .oferta{max-width: unset}
.ofertyDetail .oferta .zajawkaDiv .titleOffer{font-size: 19px}
.ofertyDetail .oferta .zajawkaDiv{padding:15px}
.ofertyDetail{grid-gap: 20px}
}

@media screen and (max-width:1200px) {
.div_offer{padding: 30px 15px 30px 15px}
}

@media screen and (max-width:1100px) {
.ofertyDetail{grid-template-columns: 1fr 1fr}
}
@media screen and (max-width:650px) {
.ofertyDetail{grid-template-columns: 1fr}
}