.bloc-gallery-01 {
width: 100%;
box-sizing: border-box;
padding: 112px var(--section-padding-x, 64px);
background-color: #fff;
}
.bloc-gallery-01__container {
max-width: var(--section-max-width, 1312px);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 112px;
} .bloc-gallery-01--wrapped-shell {
padding-top: 0;
padding-bottom: 0;
} .bloc-gallery-01__header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
max-width: 768px;
}
.bloc-gallery-01__header--fullwidth,
.bloc-gallery-01__header[style*="fullwidth"] {
max-width: 100%;
}
.bloc-gallery-01__header--boxed {
max-width: 800px;
margin: 0 auto;
}
.bloc-gallery-01__header[style*="text-align: center"] {
align-items: center;
margin-inline: auto;
}
.bloc-gallery-01__header--wrapped {
padding: var(--bloc-gallery-01-intro-wrapper-padding, 24px);
}
.bloc-gallery-01__tagline {
font-size: 16px;
font-weight: 600;
color: inherit;
margin: 0;
}
.bloc-gallery-01__headline {
font-size: 48px;
font-weight: 500;
line-height: 1.2;
color: inherit;
margin: 0;
}
.bloc-gallery-01__description {
font-size: 18px;
line-height: 1.5;
color: inherit;
margin: 0;
} .bloc-gallery-01__gallery {
border-radius: 0;
}
.bloc-gallery-01__gallery--overflow-visible {
overflow-x: visible;
overflow-y: visible;
}
.bloc-gallery-01__gallery--overflow-visible .us-slider__track,
.bloc-gallery-01__gallery--overflow-visible .bloc-gallery-01__gallery-slide,
.bloc-gallery-01__gallery--overflow-visible .bloc-gallery-01__gallery-tile {
overflow: visible;
} .bloc-gallery-01__gallery--static {
display: grid;
grid-template-columns: repeat(var(--bloc-gallery-01-static-columns, 3), minmax(0, 1fr));
gap: 24px;
overflow: hidden;
}
.bloc-gallery-01__gallery--static.bloc-gallery-01__gallery--overflow-visible {
overflow: visible;
}
.bloc-gallery-01__gallery--grouped {
grid-template-columns: 1fr;
} .bloc-gallery-01__gallery--static .bloc-gallery-01__gallery-slide:only-child {
grid-column: 1 / -1;
} .bloc-gallery-01__gallery-slide {
min-width: 0;
overflow: hidden;
border-radius: 0;
}
.bloc-gallery-01__gallery-slide--grouped {
overflow: visible;
}
.bloc-gallery-01__gallery-slide-grid {
display: grid;
grid-template-columns: repeat(var(--bloc-gallery-01-group-columns, 1), minmax(0, 1fr));
gap: 24px;
}
.bloc-gallery-01__gallery-tile {
min-width: 0;
overflow: hidden;
border-radius: 0;
}
.bloc-gallery-01__gallery-tile--wrapped {
padding: var(--bloc-gallery-01-slide-wrapper-padding, 16px);
}
.bloc-gallery-01__gallery.us-slider .us-slider__track > .bloc-gallery-01__gallery-slide {
padding-inline: 12px;
} .bloc-gallery-01__image-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
background: #E6E7E7;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
}
.bloc-gallery-01__image-placeholder svg {
width: 48px;
height: 48px;
opacity: 0.5;
} .bloc-gallery-01__gallery--static .bloc-gallery-01__gallery-image {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0;
display: block;
} .bloc-gallery-01__gallery.us-slider .bloc-gallery-01__gallery-image {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0;
} .bloc-gallery-01__gallery-image {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0;
display: block;
} .bloc-gallery-01__gallery--footer-controls {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-areas:
"track track track"
"dots prev next";
column-gap: 16px;
row-gap: 24px;
align-items: center;
}
.bloc-gallery-01__gallery--footer-controls .us-slider__track {
grid-area: track;
overflow: visible;
}
.bloc-gallery-01__gallery--footer-controls .us-slider__prev,
.bloc-gallery-01__gallery--footer-controls .us-slider__next {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
margin: 0;
}
.bloc-gallery-01__gallery--footer-controls .us-slider__prev {
grid-area: prev;
}
.bloc-gallery-01__gallery--footer-controls .us-slider__next {
grid-area: next;
}
.bloc-gallery-01__gallery .us-slider__dots {
margin-top: 16px;
justify-content: flex-start;
}
.bloc-gallery-01__gallery--footer-controls .us-slider__dots {
grid-area: dots;
align-self: center;
margin-top: 0;
min-width: 40px;
width: auto;
}
.bloc-gallery-01__gallery .us-slider__dot {
background: #cfd1d2;
}
.bloc-gallery-01__gallery .us-slider__dot:hover {
background: #9ea2a5;
}
.bloc-gallery-01__gallery .us-slider__dot.is-active {
background: #84898c;
transform: none;
} @media (max-width: 1024px) {
.bloc-gallery-01 {
padding: 80px var(--section-padding-x, 64px);
}
.bloc-gallery-01__container {
gap: 40px;
}
.bloc-gallery-01__headline {
font-size: 36px;
}
}
@media (max-width: 768px) {
.bloc-gallery-01 {
padding: 64px var(--section-padding-x, 64px);
}
.bloc-gallery-01__gallery--static {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.bloc-gallery-01__gallery-slide-grid {
grid-template-columns: 1fr;
gap: 20px;
} .bloc-gallery-01__gallery-slide,
.bloc-gallery-01__gallery-tile {
aspect-ratio: 1 / 1;
height: auto !important;
}
.bloc-gallery-01__gallery-image,
.bloc-gallery-01__image-placeholder,
.bloc-gallery-01__gallery-tile > .usine-image-placeholder {
aspect-ratio: 1 / 1;
height: 100% !important;
min-height: 0;
}
.bloc-gallery-01__headline {
font-size: 28px;
}
.bloc-gallery-01__description {
font-size: 16px;
}
.bloc-gallery-01__gallery--footer-controls {
row-gap: 20px;
}
}