/**
 * Full Media Block Styles
 */

.block-full-image {
   --block-full-image-safe-space: 0.5em;

   position: relative;
   width: 100%;
   height: 100svh;
   overflow: hidden;
}

.block-full-image__figure {
   position: absolute;
   inset: 0 var(--block-full-image-safe-space) var(--block-full-image-safe-space);
   width: calc(100% - (var(--block-full-image-safe-space) * 2));
   height: calc(100% - var(--block-full-image-safe-space));
   overflow: hidden;
   border-radius: 0.375em;
}

.block-full-image__media {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
}

.block-full-image.is-height-small {
   height: auto;
}

.block-full-image.is-height-small .block-full-image__figure {
   position: relative;
   inset: auto;
   width: calc(100% - (var(--block-full-image-safe-space) * 2));
   height: min(45em, calc(100svh - var(--block-full-image-safe-space)));
   max-height: 45em;
   margin: 0 var(--block-full-image-safe-space) var(--block-full-image-safe-space);
}

.block-full-image.is-height-small .block-full-image__media {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media screen and (max-width: 1024px) {
   .block-full-image {
      --block-full-image-safe-space: 0.1875em;
      height: auto;
   }

   .block-full-image .block-full-image__figure,
   .block-full-image.is-height-small .block-full-image__figure {
      position: relative;
      inset: auto;
      width: calc(100% - (var(--block-full-image-safe-space) * 2));
      height: 14.875rem;
      max-height: none;
      margin: 0 var(--block-full-image-safe-space) var(--block-full-image-safe-space);
   }

   .block-full-image.has-video {
      height: auto;
   }

   .block-full-image.has-video .block-full-image__figure,
   .block-full-image.has-video.is-height-small .block-full-image__figure {
      width: calc(100% - (var(--block-full-image-safe-space) * 2));
      height: 14.875rem;
      margin: 0 var(--block-full-image-safe-space) var(--block-full-image-safe-space);
   }

   .block-full-image.has-image .block-full-image__figure,
   .block-full-image.has-image.is-height-small .block-full-image__figure {
      aspect-ratio: 3 / 4;
      height: auto;
   }

   .block-full-image .block-full-image__media,
   .block-full-image.is-height-small .block-full-image__media {
      height: 100%;
      max-height: none;
      object-fit: cover;
   }
}