:root {
--ws-banner-aspect-ratio: 2 / 1;
}
@media (min-width: 992px) {
:root {
--ws-banner-aspect-ratio: 4 / 1;
}
}
.wp-block-ws-library-ws-banner .group-media {
position: relative;
border-radius: var(--border-radius) var(--border-radius) 0 0;
overflow: hidden;
aspect-ratio: var(--ws-banner-aspect-ratio);
}
.wp-block-ws-library-ws-banner .group-media .group-infos,
.wp-block-ws-library-ws-banner .group-media .credits {
position: absolute;
bottom: 0;
right: 0;
background: var(--color-dark);
color: var(--color-light);
padding: 6px 12px;
font-size: 14px;
text-align: right;
max-width: 320px;
border-radius: var(--border-radius) 0 0 0;
pointer-events: none;
}
.wp-block-ws-library-ws-image .group-media .credits:empty {
display: none;
}
.wp-block-ws-library-ws-banner .group-media .credits .field--name-field-copyright {
font-size: 12px;
}
.wp-block-ws-library-ws-banner .group-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-block-ws-library-ws-banner .group-content {
padding: var(--ws-space);
background: var(--color-2);
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
@media (min-width: 992px) {
.wp-block-ws-library-ws-banner .group-media {
border-radius: var(--border-radius);
}
.wp-block-ws-library-ws-banner .group-content {
max-width: calc(960px - 30px);
margin-left: auto;
margin-right: auto;
margin-top: -60px;
position: relative;
z-index: 1;
border-radius: var(--border-radius);
}
}