/* Preserved from the site's current spp-home-news design. */
.spp-home-news,
.spp-home-news * {
box-sizing: border-box;
}
.spp-home-news {
width: 100%;
padding: 64px 0 70px;
background: #fff;
color: #202936;
font-family: inherit;
}
.spp-home-news__container {
width: calc(100% - 40px);
max-width: 1200px;
margin: 0 auto;
}
.spp-home-news__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 28px;
}
.spp-home-news__intro {
max-width: 700px;
}
.spp-home-news__label {
display: block;
margin-bottom: 8px;
color: #4f73f4;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
}
.spp-home-news__intro h2 {
margin: 0 0 10px !important;
color: #27313d;
font-family: inherit !important;
font-size: 34px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
letter-spacing: -.02em;
}
.spp-home-news__intro p {
margin: 0 !important;
color: #78828e;
font-size: 14px;
line-height: 1.6;
}
.spp-home-news__all {
min-height: 42px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 15px;
border: 1px solid #dce2eb;
border-radius: 8px;
background: #fff;
color: #4d5a70 !important;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
transition:
border-color .2s ease,
color .2s ease,
transform .2s ease;
}
.spp-home-news__all:hover {
border-color: #4f73f4;
color: #4f73f4 !important;
transform: translateY(-1px);
}
.spp-home-news__grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 18px;
}
.spp-home-news-card {
min-width: 0;
overflow: hidden;
border: 1px solid #e2e7ef;
border-radius: 15px;
background: #fff;
box-shadow:
0 8px 26px rgba(31,45,70,.045);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.spp-home-news-card:hover {
transform: translateY(-4px);
box-shadow:
0 15px 36px rgba(31,45,70,.10);
}
.spp-home-news-card__image {
position: relative;
height: 235px;
display: block;
overflow: hidden;
background: #eef1f5;
text-decoration: none !important;
}
.spp-home-news-card__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .4s ease;
}
.spp-home-news-card:hover
.spp-home-news-card__image img {
transform: scale(1.035);
}
.spp-home-news-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
background:
linear-gradient(
135deg,
#edf2ff,
#f7f9fc
);
color: #7281a8;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.spp-home-news-card__date {
position: absolute;
left: 14px;
bottom: 14px;
min-height: 31px;
display: inline-flex;
align-items: center;
padding: 0 10px;
border-radius: 7px;
background: rgba(255,255,255,.95);
color: #3d4855;
font-size: 10px;
font-weight: 700;
box-shadow:
0 5px 18px rgba(20,31,49,.14);
}
.spp-home-news-card__body {
padding: 20px 20px 21px;
}
.spp-home-news-card__meta {
margin-bottom: 8px;
color: #4f73f4;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
}
.spp-home-news-card h3 {
margin: 0 0 10px !important;
font-family: inherit !important;
font-size: 21px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.spp-home-news-card h3 a {
color: #2c3642 !important;
text-decoration: none !important;
}
.spp-home-news-card h3 a:hover {
color: #4f73f4 !important;
}
.spp-home-news-card__body p {
display: -webkit-box;
overflow: hidden;
margin: 0 0 17px !important;
color: #79838f;
font-size: 12px;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.spp-home-news-card__more {
display: inline-flex;
align-items: center;
gap: 8px;
color: #4f73f4 !important;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
}
.spp-home-news-card__more span {
font-size: 14px;
transition: transform .2s ease;
}
.spp-home-news-card__more:hover span {
transform: translateX(3px);
}
@media (max-width: 1000px) {
.spp-home-news__grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media (max-width: 767px) {
.spp-home-news {
padding: 45px 0 50px;
}
.spp-home-news__container {
width: calc(100% - 28px);
}
.spp-home-news__header {
display: block;
margin-bottom: 22px;
}
.spp-home-news__intro h2 {
font-size: 28px !important;
}
.spp-home-news__intro p {
font-size: 12px;
}
.spp-home-news__all {
margin-top: 15px;
}
.spp-home-news__grid {
grid-template-columns: 1fr;
gap: 14px;
}
.spp-home-news-card__image {
height: 230px;
}
.spp-home-news-card__body {
padding: 18px 17px 19px;
}
.spp-home-news-card h3 {
font-size: 20px !important;
}
.spp-home-news-card__body p {
font-size: 11.5px;
}
}