section.wp-block-landing-generator-hero-gallery {
position: relative;
background-color: #030E2F;
overflow-x: clip;
overflow-y: visible;
isolation: isolate;
padding: 80px 0 48px;
margin-bottom: 2rem;
}
@media screen and (min-width: 998px) {
section.wp-block-landing-generator-hero-gallery {
padding: 80px 0 0;
margin-bottom: 6rem;
}
}
section.wp-block-landing-generator-hero-gallery::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: min(2000px, 150vw);
aspect-ratio: 1 / 1;
background: radial-gradient(50% 50% at 50% 50%, #2949A7 1.92%, #143081 27.4%, #030E2F 100%);
transform: translate(-50%, -50%);
z-index: -1;
}
.editor-styles-wrapper section.wp-block-landing-generator-hero-gallery::before {
display: none;
}
section.wp-block-landing-generator-hero-gallery::after {
content: '';
position: absolute;
top: -4rem;
left: 0;
width: 100%;
height: 70%;
background: url("data:image/svg+xml,") no-repeat;
background-size: contain;
z-index: -1;
@media screen and (min-width: 998px) {
left: 80px;
}
}
section.wp-block-landing-generator-hero-gallery .hero-gallery_wrapper {
position: relative;
padding: 0 16px;
}
@media screen and (min-width: 998px) {
section.wp-block-landing-generator-hero-gallery .hero-gallery_wrapper {
padding: 0;
}
}
section.wp-block-landing-generator-hero-gallery figure.size-full {
margin: auto auto 1.5rem auto;
}
section.wp-block-landing-generator-hero-gallery .wp-block-heading {
font-size: clamp(26px, 4vw, 64px);
line-height: 1.2;
margin: 32px auto 16px;
@media screen and (min-width: 998px) {
margin: 8px auto;
}
}
section.wp-block-landing-generator-hero-gallery .wp-block-heading + p {
max-width: 998px;
margin: 8px auto 24px;
text-wrap: pretty;
font-size: clamp(16px, 4vw, 18px);
}
section.wp-block-landing-generator-hero-gallery .wp-block-button.is-style-fill a,
.editor-styles-wrapper .wp-block-button.is-style-fill div {
padding: 12px 24px;
border-radius: 999px;
background-color: #FF6C09;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: .48px;
transition: all .3s;
}
section.wp-block-landing-generator-hero-gallery .wp-block-button.is-style-fill a:hover {
transform: scale(1.02);
}
/* Gallery group - Mobile: horizontal scroll, Desktop: 6-column grid */
section.wp-block-landing-generator-hero-gallery .wp-block-group {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 32px 0;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group .wp-block-image {
margin: 0;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group .wp-block-image img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 7 / 13;
max-height: 450px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 4px 44px 0 rgba(0, 0, 0, 0.45);
transition: all .3s;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group > * {
flex: 0 0 calc((100% - 32px) / 2.5);
scroll-snap-align: start;
margin: 0;
}
/* Desktop: 6-column grid with staggered layout */
@media (min-width: 768px) {
section.wp-block-landing-generator-hero-gallery .wp-block-group {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
overflow: visible;
margin-left: -40px;
margin-right: -40px;
padding: 130px 0 80px;
align-items: center;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group > * {
scroll-snap-align: unset;
min-width: 0;
height: 100%;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group > *:first-child {
padding-left: 0;
}
/* Staggered heights pattern - alternating */
section.wp-block-landing-generator-hero-gallery .wp-block-group > *:nth-child(odd) {
margin-top: 0;
margin-bottom: 100px;
}
section.wp-block-landing-generator-hero-gallery .wp-block-group > *:nth-child(even) {
margin-top: 100px;
margin-bottom: 0;
}
}
section.wp-block-landing-generator-hero-gallery .hero-gallery_wrapper::after {
content:'';
position: absolute;
left: 0;
right: 0;
bottom: -5rem;
width: 100%;
height: 4rem;
z-index: -1;
background-image: url("data:image/svg+xml,");
background-repeat: round;
background-size: contain;
}
@media screen and (min-width: 998px) {
section.wp-block-landing-generator-hero-gallery .hero-gallery_wrapper::after {
height: 15rem;
bottom: -7rem;
}
}