: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);
  }
}