/* Media recipe utilities. Direct single-class selectors are CSSClass-seedable; helper selectors below make wrapper-applied recipes affect common media children. */

.media-recipe-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-recipe-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
.media-fit-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
.media-fit-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
.media-fit-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
.media-fit-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
.media-fit-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
.media-focal-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
.media-focal-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
.media-focal-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
.media-focal-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
.media-focal-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
.media-focal-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
.media-focal-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
.media-focal-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
.media-focal-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
.filter-none { filter: none !important; }
.filter-invert-1 { filter: invert(1) !important; }

@media (min-width: 576px) {
    .media-recipe-sm-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-sm-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-fit-sm-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
    .media-fit-sm-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-sm-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
    .media-fit-sm-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-sm-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
    .media-focal-sm-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
    .media-focal-sm-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
    .media-focal-sm-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
    .media-focal-sm-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
    .media-focal-sm-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
    .media-focal-sm-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
    .media-focal-sm-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
    .media-focal-sm-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
    .media-focal-sm-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
}

@media (min-width: 768px) {
    .media-recipe-md-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-md-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-fit-md-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
    .media-fit-md-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-md-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
    .media-fit-md-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-md-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
    .media-focal-md-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
    .media-focal-md-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
    .media-focal-md-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
    .media-focal-md-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
    .media-focal-md-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
    .media-focal-md-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
    .media-focal-md-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
    .media-focal-md-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
    .media-focal-md-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
}

@media (min-width: 992px) {
    .media-recipe-lg-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-lg-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-fit-lg-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
    .media-fit-lg-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-lg-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
    .media-fit-lg-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-lg-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
    .media-focal-lg-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
    .media-focal-lg-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
    .media-focal-lg-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
    .media-focal-lg-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
    .media-focal-lg-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
    .media-focal-lg-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
    .media-focal-lg-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
    .media-focal-lg-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
    .media-focal-lg-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
}

@media (min-width: 1200px) {
    .media-recipe-xl-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xl-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-fit-xl-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
    .media-fit-xl-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-xl-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
    .media-fit-xl-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-xl-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
    .media-focal-xl-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
    .media-focal-xl-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
    .media-focal-xl-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
    .media-focal-xl-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
    .media-focal-xl-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
    .media-focal-xl-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
    .media-focal-xl-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
    .media-focal-xl-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
    .media-focal-xl-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
}

@media (min-width: 1400px) {
    .media-recipe-xxl-image-card { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; border-radius: 0.75rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-hero-media { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; min-height: clamp(20rem, 55vh, 42rem) !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-avatar { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 9999px !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-logo-fit { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, contain) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, contain) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-thumbnail { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 0.5rem !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-background-bleed { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; border-radius: 0 !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-media-frame-square { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-media-frame-16x9 { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-recipe-xxl-media-frame-portrait { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; --mcfw-media-position: center center; display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }
    .media-fit-xxl-cover { --mcfw-media-fit: cover; --mcfw-media-bg-size: cover; object-fit: cover !important; background-size: cover !important; }
    .media-fit-xxl-contain { --mcfw-media-fit: contain; --mcfw-media-bg-size: contain; object-fit: contain !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-xxl-fill { --mcfw-media-fit: fill; --mcfw-media-bg-size: 100% 100%; object-fit: fill !important; background-size: 100% 100% !important; }
    .media-fit-xxl-scaledown { --mcfw-media-fit: scale-down; --mcfw-media-bg-size: contain; object-fit: scale-down !important; background-size: contain !important; background-repeat: no-repeat !important; }
    .media-fit-xxl-none { --mcfw-media-fit: none; --mcfw-media-bg-size: auto; object-fit: none !important; background-size: auto !important; background-repeat: no-repeat !important; }
    .media-focal-xxl-center { --mcfw-media-position: center center; object-position: center center !important; background-position: center center !important; }
    .media-focal-xxl-top { --mcfw-media-position: center top; object-position: center top !important; background-position: center top !important; }
    .media-focal-xxl-bottom { --mcfw-media-position: center bottom; object-position: center bottom !important; background-position: center bottom !important; }
    .media-focal-xxl-left { --mcfw-media-position: left center; object-position: left center !important; background-position: left center !important; }
    .media-focal-xxl-right { --mcfw-media-position: right center; object-position: right center !important; background-position: right center !important; }
    .media-focal-xxl-topleft { --mcfw-media-position: left top; object-position: left top !important; background-position: left top !important; }
    .media-focal-xxl-topright { --mcfw-media-position: right top; object-position: right top !important; background-position: right top !important; }
    .media-focal-xxl-bottomleft { --mcfw-media-position: left bottom; object-position: left bottom !important; background-position: left bottom !important; }
    .media-focal-xxl-bottomright { --mcfw-media-position: right bottom; object-position: right bottom !important; background-position: right bottom !important; }
}

[class*="media-recipe-"] > img, [class*="media-recipe-"] img, [class*="media-recipe-"] picture > img, [class*="media-recipe-"] video { width: 100% !important; height: 100% !important; display: block !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; }
[class*="media-recipe-"] > .image-w, [class*="media-recipe-"] > .image-w > .w { width: 100% !important; height: 100% !important; }
[class*="media-recipe-"] > .image-w > .w > div { width: 100% !important; height: 100% !important; object-fit: var(--mcfw-media-fit, cover) !important; object-position: var(--mcfw-media-position, center center) !important; background-size: var(--mcfw-media-bg-size, cover) !important; background-position: var(--mcfw-media-position, center center) !important; background-repeat: no-repeat !important; }