.novablocks-media-composition {
  position: relative;
  height: 100%;
  transform: translateZ(0); }
  .novablocks-media-composition[class] {
    background: none; }

.novablocks-media-composition__grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  --nb-media-composition-gap: 10px;
  margin-top: calc(-1 * var(--nb-media-composition-gap));
  margin-left: calc(-1 * var(--nb-media-composition-gap)); }
  .novablocks-media-composition__grid + .novablocks-media-composition__grid {
    margin-top: 0; }

.novablocks-media-composition__grid-item {
  margin-top: var(--nb-media-composition-gap);
  margin-left: var(--nb-media-composition-gap);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center; }

.novablocks-media-composition__grid-item-media {
  position: relative;
  flex: 1 1 0;
  width: 100%; }

.novablocks-media-composition__grid-item-info {
  flex: 0 1 auto;
  padding-top: calc(0.125 * var(--nb-spacing)); }
  .show-captions-on-hover .novablocks-media-composition__grid-item-info,
  [data-class-name="show-captions-on-hover"] .novablocks-media-composition__grid-item-info {
    opacity: 0;
    pointer-events: none;
    transition: var(--nb-transition);
    --nb-transition-duration: 0.15s;
    transition-property: opacity; }
  .show-captions-on-hover .novablocks-media-composition__grid-item:hover .novablocks-media-composition__grid-item-info,
  [data-class-name="show-captions-on-hover"] .novablocks-media-composition__grid-item:hover .novablocks-media-composition__grid-item-info {
    opacity: 1;
    pointer-events: auto; }

.novablocks-media-composition__image[class] {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none; }
  @supports (transform: translate(-50%, -50%)) {
    .novablocks-media-composition__image[class] {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); } }
  @supports ((-o-object-fit: cover) or (object-fit: cover)) {
    .novablocks-media-composition__image[class] {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      -o-object-fit: cover;
         object-fit: cover;
      transform: none; } }