/* Stretch content of all columns */
.wp-block-column > * {
width: 100%;
}
/* Add padding to columns without background or section style */
.wp-block-columns:not(:has(.has-background)):not(:has([class*="is-style-section-"])):not(:has([style*="padding-left:var(--wp--preset--spacing--50)"])):not(:has([style*="padding-right:var(--wp--preset--spacing--50)"])) {
padding: 0 var(--wp--preset--spacing--50);
}
/* Styles for the route block style */
.wp-block-columns.is-style-route {
position: relative;
& > .wp-block-column {
z-index: 0;
position: relative;
&::after {
content: '';
width: 20px;
height: calc(100% + var(--wp--preset--spacing--70));
background: var(--wp--preset--color--secondary);
left: calc(64px / 2 - 10px);
top: 0;
position: absolute;
z-index: -1;
@media screen and (min-width: 781px) {
height: 24px;
width: calc( 100% + var(--wp--preset--spacing--70));
top: calc(96px / 2 - 12px);
left: 0;
}
}
&:first-child::before {
content: '';
height: 20px;
width: 100px;
background: var(--wp--preset--color--secondary);
position: absolute;
top: calc(64px / 2 - 10px);
left: -100px;
@media screen and (min-width: 781px) {
width: 100vw;
height: 48px;
left: calc(-100vw + (96px / 2 - 12px));
top: -72px;
background: transparent;
border-top: 24px solid var(--wp--preset--color--secondary);;
border-right: 24px solid var(--wp--preset--color--secondary);;
border-top-right-radius: 96px;
}
}
&:last-child::after {
height: calc(100% + var(--wp--preset--spacing--90));
@media screen and (min-width: 781px) {
height: 24px;
width: 100vw;
}
}
}
&::before {
content: '';
background-image: url('data:image/svg+xml,');
width: 216px;
height: 118px;
background-size: contain;
position: absolute;
top: -11px;
right: -32px;
background-color: white;
z-index: 1;
display: none;
@media screen and (min-width: 990px) {
display: block;
}
}
&::after {
content: '';
height: 24px;
width: 100vw;
background: var(--wp--preset--color--primary);
position: absolute;
top: calc(96px / 2 - 12px);
right: -100vw;
z-index: 2;
display: none;
@media screen and (min-width: 990px) {
display: block;
}
}
}
.wp-block-group[class*="is-style-section"]:has(.wp-block-columns.is-style-route) {
overflow: hidden;
}
.is-style-section-primary .wp-block-columns.is-style-route::before {
background-color: var(--wp--preset--color--primary);
background-image: url('data:image/svg+xml,');
}
.is-style-section-primary-alt .wp-block-columns.is-style-route::before {
background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, white);
background-image: url('data:image/svg+xml,');
}
.is-style-section-primary .wp-block-columns.is-style-route::after,
.is-style-section-primary-alt .wp-block-columns.is-style-route::after {
background-color: var(--wp--preset--color--secondary);
}
.is-style-section-secondary .wp-block-columns.is-style-route::before {
background-color: var(--wp--preset--color--secondary);
background-image: url('data:image/svg+xml,');
}
.is-style-section-secondary .wp-block-columns.is-style-route .wp-block-column::after,
.is-style-section-secondary .wp-block-columns.is-style-route .wp-block-column:before {
background: var(--wp--preset--color--base);
}
.is-style-section-secondary .wp-block-columns.is-style-route .wp-block-column:first-child::before {
background: transparent;
border-color: var(--wp--preset--color--base);
}
.is-style-section-accent .wp-block-columns.is-style-route::before {
background-color: var(--wp--preset--color--accent);
}