.suffer {
overflow: hidden;
}
.suffer__row {
display: flex;
align-items: flex-end;
}
.suffer__title {
margin-bottom: 40px;
}
.suffer__left {
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
}
@media screen and (max-width: 1600px) {
.suffer__left {
position: relative;
flex: 1 1 auto;
margin-left: 0;
margin-right: 0;
height: 100%;
align-self: flex-start;
}
.suffer__left img {
position: absolute;
right: 50px;
top: 0;
max-width: 500px;
}
}
@media screen and (max-width: 1300px) {
.suffer__left {
display: none;
}
}
.suffer__right {
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
}
@media screen and (max-width: 1600px) {
.suffer__right {
flex: 0 0 800px;
margin-left: 60px;
margin-right: 0;
}
}
@media screen and (max-width: 1300px) {
.suffer__right {
width: 100%;
flex: 0 0 100%;
margin-left: 0;
}
}
@media screen and (max-width: 960px) {
.suffer__slider {
overflow: visible;
}
}
@media screen and (min-width: 960px) {
.suffer .swiper-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
}
.suffer-item {
background: #F2F5F8;
border-radius: 10px;
padding: 23px 30px 27px 35px;
height: auto;
position: relative;
transition: all 0.3s;
}
.suffer-item:hover {
background: #F03444;
}
.suffer-item:hover .suffer-item__icon img {
opacity: 0;
}
.suffer-item:hover .suffer-item__icon img.white {
opacity: 1;
}
.suffer-item:hover .suffer-item__text * {
color: #ffffff;
}
.suffer-item:active {
opacity: 0.9;
}
.suffer-item__link {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
z-index: 2;
}
@media screen and (min-width: 960px) {
.suffer-item {
width: calc(50% - 15px);
}
}
@media screen and (max-width: 960px) {
.suffer-item {
width: 280px;
padding: 30px 20px 222px 35px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.suffer-item.swiper-slide-visible {
opacity: 1;
pointer-events: all;
}
}
.suffer-item__bg {
position: absolute;
right: 0;
bottom: 0;
max-width: 100%;
display: none;
}
@media screen and (max-width: 960px) {
.suffer-item__bg {
display: block;
}
}
.suffer-item__icon {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-bottom: 20px;
position: relative;
}
@media screen and (max-width: 1600px) {
.suffer-item__icon {
width: 25px;
height: 25px;
}
}
@media screen and (max-width: 960px) {
.suffer-item__icon {
display: none;
}
}
.suffer-item__icon img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
transition: opacity 0.3s;
}
.suffer-item__icon img.white {
opacity: 0;
}
.suffer-item__text * {
font-size: 24px;
font-weight: bold;
text-align: left;
color: #303030;
margin: 0;
transition: color 0.3s;
}
@media screen and (max-width: 1600px) {
.suffer-item__text * {
font-size: 20px;
}
}
@media screen and (max-width: 960px) {
.suffer-item__text * {
font-weight: 600;
}
}
.suffer-item__text b, .suffer-item__text strong {
font-weight: 700;
}
@media screen and (max-width: 960px) {
.suffer-item__text b, .suffer-item__text strong {
color: #1c427f;
}
}
.suffer__slider-arrows {
display: none;
}
@media screen and (max-width: 960px) {
.suffer__slider-arrows {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 20px;
}
}