.wp-block-hero-gallery .container {
display: flex;
gap: 4em;
margin-top: 4em;
margin-bottom: 4em;
} .wp-block-hero-gallery .wp-block-hero-gallery__gallery {
display: grid;
grid-template-columns: 1fr 1.5em 1fr;
grid-template-rows: 1.5em 1fr 1.5em 4.5em 1.5em 1fr 1.5em;
flex: 1;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery div {
position: relative;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery div:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery div:nth-child(2) {
grid-column: 3 / 4;
grid-row: 2 / 5;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery div:nth-child(3) {
grid-column: 1 / 2;
grid-row: 4 / 7;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery div:nth-child(4) {
grid-column: 3 / 4;
grid-row: 6 / 8;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery img {
border-radius: 4px;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
} .wp-block-hero-gallery .wp-block-hero-gallery__content {
flex: 2;
padding: 2.5em 0;
}
.wp-block-hero-gallery h1,
.wp-block-hero-gallery h2,
.wp-block-hero-gallery h3,
.wp-block-hero-gallery h4,
.wp-block-hero-gallery h5 {
margin: 0;
}
.wp-block-hero-gallery .wp-block-hero-gallery__content-statements {
display: flex;
gap: 0 4em;
flex-wrap: wrap;
margin-top: 1.5em;
margin-bottom: 2em;
text-align: center;
}
@media (max-width: 1200px) {
.wp-block-hero-gallery .wp-block-hero-gallery__content {
flex: 1;
}
.wp-block-hero-gallery .wp-block-hero-gallery__content-statements {
gap: 0 2em;
}
}
@media (max-width: 768px) {
.wp-block-hero-gallery .container {
flex-direction: column;
gap: 0;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery {
display: flex;
gap: 1.5em;
}
.wp-block-hero-gallery .wp-block-hero-gallery__gallery img {
position: relative;
}
.wp-block-hero-gallery .wp-block-hero-gallery__content {
margin-top: 1em;
padding: 0;
}
.wp-block-hero-gallery .wp-block-hero-gallery__content-statements {
gap: 0 1em;
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-hero-gallery .wp-block-hero-gallery__gallery img {
transform: scale(0);
}
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-hero-gallery .wp-block-hero-gallery__content {
opacity: 0;
}