.home-news {
width: 100%;
box-sizing: border-box;
}
.home-news__grid {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
padding-bottom: 2rem;
}
.home-news__grid .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.home-news__grid .swiper-slide {
min-width: 0;
height: auto;
}
.home-news__grid .swiper-slide:hover,
.home-news__grid .swiper-slide:focus-within {
z-index: 2;
}
.home-news__card {
position: relative;
height: 100%;
}
.home-news__link {
display: grid;
gap: var(--wp--preset--spacing--2, 1.5rem);
height: 100%;
color: inherit;
text-decoration: none;
}
.home-news__media-frame {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
transition: aspect-ratio 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-news__media {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
background: var(--wp--preset--color--custom-default, #000);
}
.home-news__media::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
transform: translate(-50%, 50%);
border-radius: 50%;
background: radial-gradient(
circle,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0) 50%
);
pointer-events: none;
}
.home-news__media img,
.home-news__image {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
}
.home-news__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.35) 42%,
rgba(0, 0, 0, 0) 72%
);
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.home-news__plus {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 56px;
height: 56px;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.home-news__plus::before,
.home-news__plus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--wp--preset--color--custom-white, #fff);
transform: translate(-50%, -50%);
}
.home-news__plus::before {
width: 56px;
height: 1.5px;
}
.home-news__plus::after {
width: 1.5px;
height: 56px;
}
.home-news__date {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 3;
display: grid;
gap: 0;
margin: 0;
color: var(--wp--preset--color--custom-white, #fff);
font-size: var(--wp--preset--font-size--2);
font-weight: 400;
line-height: 1.2;
font-style: normal;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.home-news__day,
.home-news__month,
.home-news__year {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.home-news__month,
.home-news__year {
text-transform: lowercase;
}
.home-news__title {
position: relative;
z-index: 0;
margin: 0;
padding: 0 1rem;
font-family: var(--wp--preset--font-family--dm-sans);
font-size: var(--wp--preset--font-size--4);
font-weight: 400;
line-height: 1.4;
}
.home-news__link:hover,
.home-news__link:focus-visible {
z-index: 2;
}
.home-news__link:hover .home-news__media-frame,
.home-news__link:focus-visible .home-news__media-frame {
aspect-ratio: 0.71;
}
.home-news__link:hover .home-news__overlay,
.home-news__link:focus-visible .home-news__overlay {
opacity: 1;
}
.home-news__link:hover .home-news__plus,
.home-news__link:focus-visible .home-news__plus {
opacity: 1;
}
.home-news__empty {
margin: 0;
text-align: center;
opacity: 0.7;
}
.home-news__pagination {
display: none;
}
@media (max-width: 900px) {
.home-news__grid .swiper-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.home-news__grid .swiper-wrapper {
display: flex;
grid-template-columns: none;
gap: 0;
}
.home-news__media {
aspect-ratio: 3 / 4;
}
.home-news__overlay,
.home-news__plus {
opacity: 1;
}
.home-news__pagination {
display: block;
position: static;
margin-top: var(--wp--preset--spacing--2);
}
}
@media (hover: none) {
.home-news__overlay,
.home-news__plus {
opacity: 1;
}
}