:root{
  --mi-aspect-ratio: 3/4;
  --mi-border-radius: var(--radius-auto-xl);
  --mi-deco-spcing-size: clamp(2.5rem, 4.5cqw, 4.5rem);
  --mi-deco-spacing: 0 var(--mi-deco-spcing-size)  var(--mi-deco-spcing-size) 0;
}

.c-mediaimage{
  container-type: inline-size;
  container-name: mi-box;

  :is(img,picture, video, embed, iframe){
    border-radius: var(--mi-border-radius,0);
  }

  &.media-decoration .media{
    position: relative;
    isolation: isolate;
    padding: var(--mi-deco-spacing) ;

    :is(img,picture){
      filter: grayscale(100%);
      transition: filter 0.3s ease-in-out;
      &:hover{
        filter: grayscale(0%);
      }


    }
    &::after{
      content: "";
      display: block;
      width: calc(100% -  var(--mi-deco-spcing-size));
      height: calc(100% -  var(--mi-deco-spcing-size));
      position: absolute;
      z-index: -1;
      background-color: #fff;
      bottom: 0;
      right: 0;
      border-radius: var(--mi-border-radius,0);
    }






  }

  &.media-radius--sm{ --mi-border-radius: var(--radius-default);  }
  &.media-radius--lg{ --mi-border-radius: var(--radius-lg);  }
  &.media-radius--xl{ --mi-border-radius: var(--radius-auto-xl);  }
  &.media-radius--round{ --mi-border-radius: var(--radius-round);  }

}