.pr-archive__title {
font-family: var( --font-heading );
font-weight: 700;
font-size: clamp( 2.25rem, 5vw, 3.75rem );
color: var( --color-dark );
margin-block: 40px 32px;
} .pr-archive__item {
display: grid;
grid-template-columns: 9fr 5fr;
gap: 48px;
align-items: center;
margin-block: 0 60px;
} .pr-archive__item:not( :has( .pr-archive__text ) ) {
grid-template-columns: 1fr;
} .pr-archive__item > * {
min-width: 0;
} .pr-archive__item:first-child {
margin-top: 40px;
} .pr-archive__item-title {
font-family: var( --font-heading );
font-weight: 700;
font-size: clamp( 1.8rem, 3.4vw, 2.4rem );
color: var( --color-dark );
margin: 0 0 16px;
} .pr-archive__text {
color: var( --color-text );
}
.pr-archive__text > :first-child {
margin-top: 0;
}
.pr-archive__text > :last-child {
margin-bottom: 0;
}
.pr-empty {
color: var( --color-text );
margin-block: 40px 60px;
} .pr-banner {
position: relative;
display: flex;
align-items: flex-end;
min-height: 230px;
background: var( --color-dark-bg );
overflow: hidden;
}
.pr-banner__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .pr-banner::after {
content: "";
position: absolute;
inset: 0;
background: rgba( 10, 10, 10, 0.45 );
}
.pr-banner__inner {
position: relative;
z-index: 1; }
.pr-banner__title {
font-family: var( --font-heading );
font-weight: 700;
font-size: clamp( 2.25rem, 5vw, 3.75rem );
color: #ffffff;
margin: 0;
} .pr-layout {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 48px;
align-items: start;
margin-block: 40px 60px;
}
.pr-layout__title {
font-family: var( --font-heading );
font-weight: 700;
font-size: 2.1rem;
color: var( --color-dark );
margin: 0 0 24px;
}
.pr-layout__text {
color: var( --color-text );
}
.pr-layout__text > :first-child {
margin-top: 0;
} .pr-layout__media,
.pr-layout__text {
min-width: 0;
} .pr-carousel {
--swiper-theme-color: var( --color-primary ); overflow: hidden;
} .pr-carousel .swiper-wrapper {
display: flex;
width: 100%;
height: auto;
box-sizing: content-box;
}
.pr-carousel .pr-carousel__slide {
flex-shrink: 0;
width: 100%;
height: auto;
}
.pr-carousel__nav {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba( 255, 255, 255, 0.9 );
color: var( --color-dark );
cursor: pointer;
transform: translateY( -50% );
box-shadow: 0 2px 10px rgba( 10, 10, 10, 0.12 );
opacity: 0;
transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
} .pr-carousel:hover .pr-carousel__nav,
.pr-carousel:focus-within .pr-carousel__nav {
opacity: 1;
} .pr-carousel__nav:hover,
.pr-carousel__nav:focus-visible {
background: var( --color-primary );
color: var( --color-dark );
}
.pr-carousel__nav--prev {
left: 16px;
}
.pr-carousel__nav--next {
right: 16px;
} .pr-carousel .pr-carousel__img {
display: block;
width: 100%;
height: 420px;
object-fit: cover;
} .swiper .pr-carousel__pagination {
position: static;
margin-top: 16px;
text-align: center;
}
.swiper .pr-carousel__pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-inline: 4px;
background: var( --color-primary );
opacity: 1; transform: scale( 1 );
transition: background 0.2s ease, transform 0.2s ease;
}
.swiper .pr-carousel__pagination .swiper-pagination-bullet-active {
background: var( --color-dark );
transform: scale( 1.25 );
} @media (max-width: 1024px) {
.pr-banner {
min-height: 100px;
}
.pr-archive__item {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.pr-layout {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.pr-carousel .pr-carousel__img {
height: 320px;
}
} @media (max-width: 767px) {
.pr-banner {
min-height: 100px;
}
.pr-archive__item {
grid-template-columns: 1fr;
gap: 24px;
}
.pr-archive__item-title {
margin-bottom: 16px;
}
.pr-layout {
grid-template-columns: 1fr;
gap: 32px;
margin-block: 32px 40px;
}
.pr-layout__title {
margin-bottom: 16px;
}
.pr-carousel .pr-carousel__img {
height: 220px;
}
} @media (hover: none) {
.pr-carousel__nav {
opacity: 1;
}
}