.production-gallery__title {
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 42px;
line-height: 52px;
color: rgba(31, 79, 206, 1);
margin: 0 0 24px;
}
.production-gallery__description {
font-family: 'Mulish', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: rgba(27, 27, 27, 1);
margin: 0 0 52px;
max-width: 851px;
}
.production-gallery__list {
display: flex;
gap: 12px;
height: 320px;
}
.production-gallery__item {
position: relative;
flex: 0 0 120px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: none;
-webkit-appearance: none;
appearance: none;
transition: flex-grow 0.45s ease;
}
.production-gallery__item.is-active {
flex-grow: 1;
}
.production-gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.production-gallery__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.production-gallery__label {
position: absolute;
z-index: 1;
color: #fff;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 28px;
white-space: nowrap;
pointer-events: none;
}
.production-gallery__item:not(.is-active) .production-gallery__label {
left: 50%;
bottom: 20px;
transform: translateX(-50%) rotate(180deg);
writing-mode: vertical-rl;
}
.production-gallery__item.is-active .production-gallery__label {
left: 16px;
right: 16px;
bottom: 24px;
text-align: center;
writing-mode: horizontal-tb;
transform: none;
}
@media (max-width: 1024px) {
.production-gallery__title {
font-size: 28px;
line-height: 35px;
margin-bottom: 16px;
}
.production-gallery__description {
font-size: 16px;
line-height: 24px;
margin-bottom: 32px;
}
.production-gallery__list {
height: 260px;
gap: 8px;
}
.production-gallery__item {
flex-basis: 88px;
}
.production-gallery__label {
font-size: 16px;
line-height: 22px;
}
}
@media (max-width: 640px) {
.production-gallery__title {
font-size: 22px;
line-height: 29px;
}
.production-gallery__list {
flex-direction: column;
height: auto;
gap: 10px;
}
.production-gallery__item {
flex: none;
width: 100%;
height: 120px;
}
.production-gallery__item .production-gallery__label,
.production-gallery__item:not(.is-active) .production-gallery__label {
left: 16px;
right: 16px;
bottom: 16px;
text-align: center;
writing-mode: horizontal-tb;
transform: none;
}
}