main.main-news-page {
position: relative;
max-width: 100%;
display: flex;
justify-content: space-between;
width: 100%;
z-index: 2;
padding: 24vh 2.8vw 12vh;
margin-top: 0;
margin-inline: auto;
gap: 0 30px;
}
main.main-news-page .wp-block-group {
width: 100%;
}
@media screen and (max-width: 768px) {
main.main-news-page {
padding: 140px 20px 14vh !important;
display: block;
gap: 0;
}
}
.wrap__news {
padding-left: 24.3vw;
width: 100%;
will-change: opacity, filter, transform;
}
@media screen and (max-width: 768px) {
.wrap__news {
padding-left: 0;
}
}
.news__mobile-title {
border-bottom: 1px solid #000;
display: none;
font-family: 'Shippori Mincho B1', serif;
font-size: max(2vw, 20px);
font-weight: 700;
line-height: 1;
margin: 0 0 55px;
padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
.news__mobile-title {
display: block;
}
}
.news__categories {
display: flex;
gap: 2.5vw;
}
.news__categories__link {
font-family: 'neue-haas-grotesk-display', sans-serif;
font-size: max(1.1vw, 15px);
font-weight: 500;
letter-spacing: 1px;
line-height: 1;
color: #000;
text-decoration: none;
}
.news__categories__link:hover {
font-weight: 700;
text-decoration: none;
}
.news__categories__link--active {
font-weight: 700;
}
@media screen and (max-width: 768px) {
.news__categories {
gap: 5vw;
}
}
@media screen and (max-width: 425px) {
.news__categories {
justify-content: space-between;
max-width: 400px;
}
}
.news__items {
margin-top: 110px;
}
@media screen and (max-width: 768px) {
.news__items {
margin-top: 20px;
}
}
.news__item {
align-items: start;
border-top: 1px solid #b4b4b4;
display: grid;
gap: 2vw 2.8vw;
grid-template-columns: 11% 1fr 21.5vw;
padding: 35px 0;
position: relative;
text-decoration: none;
}
@media screen and (max-width: 768px) {
.news__item {
border-top: none;
grid-template-columns: 1fr;
padding: 30px 0;
}
}
.news__item:hover {
text-decoration: none;
}
.news__item:last-child {
border-bottom: 1px solid #b4b4b4;
}
@media screen and (max-width: 425px) {
.news__item:last-child {
border-bottom: none;
padding: 30px 0 0;
}
}
.news__item__meta {
font-family: 'neue-haas-grotesk-display', sans-serif;
font-size: max(1.2vw, 13px);
font-weight: 700;
letter-spacing: 0.07em;
z-index: 2;
}
@media screen and (max-width: 768px) {
.news__item__meta {
align-items: center;
display: flex;
gap: 0 3vw;
margin-top: 20px;
}
}
.news__item__meta div {
color: #000;
}
.news__item__meta__category {
align-items: center;
border: 1px solid #000;
display: inline-flex;
font-family: 'neue-haas-grotesk-display', sans-serif;
font-size: max(0.4vw, 10px);
font-weight: 700;
justify-content: center;
letter-spacing: 0.05em;
line-height: 1;
margin-top: 10px;
padding: 3px 8px;
color: #000;
text-decoration: none;
}
.news__item__meta__category:hover {
text-decoration: none;
}
@media screen and (max-width: 768px) {
.news__item__meta__category {
margin-top: 0;
}
}
.news__item__title {
font-size: max(1.6vw, 16px);
line-height: 1.7;
z-index: 1;
color: #000;
text-decoration: none;
}
.news__item__title:after {
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.news__item__thumbnail {
aspect-ratio: 3 / 2;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.news__item__thumbnail {
grid-row: 1 / 2;
margin-bottom: 20px;
}
}
.news__item__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news__empty {
align-items: center;
display: flex;
font-family: 'neue-haas-grotesk-display', sans-serif;
font-size: max(4vw, 12px);
justify-content: flex-start;
min-height: 60vh;
width: 100%;
color: #000;
}
.news__pagination {
align-items: center;
display: flex;
font-family: 'neue-haas-grotesk-display', sans-serif;
font-size: max(1vw, 11px);
font-weight: 700;
gap: 2vw;
justify-content: flex-end;
margin-top: 100px;
}
.news__pagination__next,
.news__pagination__prev {
align-items: flex-end;
display: flex;
font-size: max(0.8vw, 12px);
gap: 0.4vw;
color: #000;
text-decoration: none;
}
.news__pagination__next__arrow,
.news__pagination__prev__arrow {
transform: translateY(-5px);
}
.news__pagination__prev {
margin-right: 2vw;
}
.news__pagination__next {
margin-left: 2vw;
}
.news__pagination__link {
align-items: center;
display: flex;
height: 45px;
justify-content: center;
position: relative;
width: 18px;
color: #000;
text-decoration: none;
}
.news__pagination__link:before {
background-color: #000;
bottom: 0;
content: "";
display: block;
height: 3px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
width: 100%;
}
.news__pagination__link--active:before {
opacity: 1;
}
.news__loading {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
}
.news__loading.active {
display: flex !important;
}
.news__loading-content {
text-align: center;
}
.news__loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #000;
border-radius: 50%;
width: 50px;
height: 50px;
animation: news-spinner-rotate 1s linear infinite;
margin: 0 auto;
}
.news__loading-text {
margin-top: 20px;
font-size: 14px;
color: #000;
font-weight: 500;
}
@keyframes news-spinner-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}