/*======================================================================
MF-09

MEDIA FOUNDATION
Version : 3.0

======================================================================*/

.ms-img{

display:block;

width:100%;

height:auto;

max-width:100%;

object-fit:cover;

vertical-align:middle;

}


.ms-img-rounded{

border-radius:var(--ms-radius-md);

overflow:hidden;

}

.ms-img-rounded-lg{

border-radius:var(--ms-radius-lg);

overflow:hidden;

}

.ms-img-circle{

border-radius:50%;

overflow:hidden;

}


.ms-ratio-1x1{

aspect-ratio:1/1;

}

.ms-ratio-4x3{

aspect-ratio:4/3;

}

.ms-ratio-3x2{

aspect-ratio:3/2;

}

.ms-ratio-16x9{

aspect-ratio:16/9;

}

.ms-ratio-21x9{

aspect-ratio:21/9;

}


.ms-media{

position:relative;

overflow:hidden;

border-radius:inherit;

background:var(--ms-surface);

}

.ms-media img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:

transform var(--ms-motion-slow) var(--ms-ease-standard);

}


.ms-media-hover:hover img{

transform:scale(1.05);

}

.ms-media-zoom{

overflow:hidden;

}

.ms-media-zoom img{

transition:

transform var(--ms-motion-slow) var(--ms-ease-standard);

}

.ms-media-zoom:hover img{

transform:scale(1.08);

}


.ms-media-overlay{

position:absolute;

inset:0;

display:flex;

align-items:flex-end;

padding:var(--ms-space-8);

background:

linear-gradient(

180deg,

rgba(0,0,0,0) 35%,

rgba(0,0,0,.70) 100%

);

color:var(--ms-white);

pointer-events:none;

}


.ms-media-caption{

display:flex;

flex-direction:column;

gap:var(--ms-space-2);

max-width:100%;

}


.ms-media-top{

object-position:top;

}

.ms-media-center{

object-position:center;

}

.ms-media-bottom{

object-position:bottom;

}


.ms-img-lazy{

opacity:0;

transition:

opacity var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-img-lazy.is-loaded{

opacity:1;

}


.ms-video{

position:relative;

width:100%;

overflow:hidden;

border-radius:inherit;

background:#000;

}

.ms-video video,

.ms-video iframe{

display:block;

width:100%;

height:100%;

border:0;

}


.ms-embed{

position:relative;

width:100%;

padding-bottom:56.25%;

overflow:hidden;

border-radius:inherit;

}

.ms-embed iframe,

.ms-embed video{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}