.custom-content-with-media{
    max-width: 100%;
    margin: var(--block-margin) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--row-gap);
}

.custom-content-with-media-content{
    max-width: var(--wide-width);
    margin: 0 auto;
}

.custom-content-with-media-image{
    overflow: hidden;
    padding: var(--block-margin) 0;
}

.custom-content-with-media[data-image-graphics=""]:is([data-image-shape="none"], [data-image-shape="large-none"]) .custom-content-with-media-image{
    padding-top: 0;
    padding-bottom: 0;
}

.custom-content-with-media-image-inner{
    position: relative;
    max-width: var(--wide-width);
    margin: 0 auto;
}

.custom-content-with-media-image.animate__animated{
    animation-name: fadeIn;
    animation-duration: 0.1s;
}

.custom-content-with-media-image-graphic{
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.custom-content-with-media-image.animate__animated .custom-content-with-media-image-graphic{
    animation-name: custom-content-with-media-float;
    animation-fill-mode: both;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.custom-content-with-media-image.animate__animated .custom-content-with-media-image-graphic:is([data-image-number="1"], [data-image-number="3"], [data-image-number="5"]){
    animation-direction: reverse;
}

.custom-content-with-media-image-graphic[data-image-number="1"]{
    width: min(23rem, 55.29%);
    top: calc(var(--block-margin) * -1);
    left: calc(var(--column-gap) * -0.9);
}

.custom-content-with-media[data-image-shape="original"] .custom-content-with-media-image-graphic[data-image-number="1"]{
    z-index: -1;
}

.custom-content-with-media-image-graphic[data-image-number="2"]{
    width: min(15.8rem, 38%);
    top: var(--row-gap);
    right: 0;
}

.custom-content-with-media-image-graphic[data-image-number="3"]{
    width: min(23rem, 60%);
    top: calc(var(--block-margin) * 2);
}

.custom-content-with-media-image-graphic[data-image-number="4"]{
    width: min(28.6rem, 73.5%);
    top: calc(var(--block-margin) * -1);
}

.custom-content-with-media[data-image-position="left"] .custom-content-with-media-image-graphic[data-image-number="3"]{
    right: calc(var(--item-column-gap)* -2);
}

.custom-content-with-media[data-image-position="left"] .custom-content-with-media-image-graphic[data-image-number="4"]{
    right: 15%;
}

.custom-content-with-media[data-image-position="right"] .custom-content-with-media-image-graphic[data-image-number="3"]{
    left: calc(var(--item-column-gap)* -2);
}

.custom-content-with-media[data-image-position="right"] .custom-content-with-media-image-graphic[data-image-number="4"]{
    left: 15%;
}

.custom-content-with-media[data-image-position="right"] .custom-content-with-media-image-graphic[data-image-number="3"] img{
    transform: rotateY(180deg);
}

.custom-content-with-media-image-graphic[data-image-number="5"]{
    width: min(23rem, 60%);
    top: calc(var(--block-margin)* 3);
}

.custom-content-with-media-image-graphic[data-image-number="6"]{
    width: min(28.6rem, 73.5%);
    top: calc(var(--block-margin) * -1);
}

.custom-content-with-media-image-main :is(img, video, iframe){
    width: 100%;
}

.custom-content-with-media-image-main iframe{
    aspect-ratio: var(--aspect-ratio);
    border: none;
    display: block;
}

.custom-content-with-media-image.animate__animated .custom-content-with-media-image-main{
    animation-name: custom-content-with-media-zoom-in;
    animation-fill-mode: both;
    animation-duration: 0.5s;
}

.custom-content-with-media[data-image-shape="original"] .custom-content-with-media-image-main :is(img, video, iframe){
    border-radius: 4rem;
}

.custom-content-with-media[data-image-shape="pill"] .custom-content-with-media-image-main :is(img, video, iframe){
    border-radius: 400rem;
}

.custom-content-with-media:is([data-image-shape="circle"], [data-image-shape="large-circle"]) .custom-content-with-media-image-main :is(img, video, iframe){
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

.custom-content-with-media:is([data-image-shape="large-circle"], [data-image-shape="large-none"]) .custom-content-with-media-image-main :is(img, video, iframe){
    width: calc(100% + var(--column-gap));
    max-width: calc(100% + var(--column-gap));
}

.custom-content-with-media[data-image-position="left"]:is([data-image-shape="large-circle"], [data-image-shape="large-none"]) .custom-content-with-media-image-main :is(img, video, iframe){
    transform: translateX(calc(var(--column-gap) * -1));
}

.custom-content-with-media-content{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--item-row-gap);
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 0 0 var(--block-margin);
    width: 100%;
}

.custom-content-with-media-content.animate__animated{
    animation-name: fadeIn;
    animation-duration: 0.1s;
}

.custom-content-with-media-content.animate__animated .eyebrow{
    animation-name: custom-content-with-media-fade-in-up;
    animation-fill-mode: both;
    animation-duration: 0.5s;
}

.custom-content-with-media-content h2{
    font: var(--font-headline-3);
    margin-bottom: var(--item-row-gap);
}

.custom-content-with-media-content.animate__animated h2{
    animation-name: custom-content-with-media-fade-in-up;
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-delay: 0.2s;
}

.custom-content-with-media-content-wrapper{
    margin-bottom: var(--item-row-gap);
}

.custom-content-with-media-content-wrapper > *:last-child{
    margin-bottom: 0;
}

.custom-content-with-media-content.animate__animated .custom-content-with-media-content-wrapper{
    animation-name: custom-content-with-media-fade-in-up;
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-delay: 0.4s;
}

.custom-content-with-media-content-buttons{
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--item-column-gap);
    row-gap: var(--item-row-gap);
    align-items: center;
    width: 100%;
}

.custom-content-with-media-content.animate__animated .custom-content-with-media-content-buttons{
    animation-name: custom-content-with-media-fade-in-up;
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-delay: 0.6s;
}

@media (min-height: 600px){
    .custom-content-with-media:is([data-image-shape="original"], [data-image-shape="pill"], [data-image-shape="circle"]) .custom-content-with-media-image-main :is(img, video, iframe){
        max-height: calc(100vh - var(--admin-bar-height) - var(--header-height) - var(--row-gap));
        object-fit: cover;
    }

    .custom-content-with-media:is([data-image-shape="none"]) .custom-content-with-media-image-main :is(img, video, iframe){
        max-height: calc(100vh - var(--admin-bar-height) - var(--header-height) - var(--row-gap));
        object-fit: contain;
    }
}

@media (min-width: 992px){
    .custom-content-with-media{
        --content-container-width: calc( ( ( 100vw / 3 ) * 2 ) - var(--column-gap) );
        --image-container-width: calc( ( 100vw / 3 ) + var(--column-gap) );

        --content-width: calc( ( ( var(--container-width) - var(--column-gap) - ( var(--page-padding) * 2 ) ) / 3 ) * 2 );
        --image-width: calc( ( ( var(--container-width) - var(--column-gap) - ( var(--page-padding) * 2 ) ) / 3 ) );
    }

    .custom-content-with-media[data-image-position="left"]{
        grid-template-columns: var(--image-container-width) minmax(0, auto);
    }

    .custom-content-with-media[data-image-position="right"]{
        grid-template-columns: var(--content-container-width) minmax(0, auto);
    }

    .custom-content-with-media-image{
        max-width: 100%;
        position: sticky;
        top: calc(var(--admin-bar-height) + var(--header-height));
        align-self: start;
    }

    .custom-content-with-media-image-inner{
        max-width: var(--image-width);
        margin: 0;
    }

    .custom-content-with-media[data-image-position="left"] .custom-content-with-media-image{
        padding-right: var(--column-gap);
    }

    .custom-content-with-media[data-image-position="right"] .custom-content-with-media-image{
        order: 2;
        padding-left: var(--column-gap);
    }

    .custom-content-with-media[data-image-position="left"] .custom-content-with-media-image-inner{
        margin-left: auto;
    }

    .custom-content-with-media-content{
        max-width: var(--content-width);
        margin: 0;
        align-self: center;
        padding: var(--block-margin) 0;
    }

    .custom-content-with-media[data-image-position="right"] .custom-content-with-media-content{
        justify-self: right;
    }

    .custom-content-with-media-content-wrapper,
    .custom-content-with-media-content-buttons{
        width: 100%;
        max-width: 62.4rem;
        justify-self: end;
    }
}

@keyframes custom-content-with-media-fade-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 5rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes custom-content-with-media-zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes custom-content-with-media-rotate-in-left {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(45deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes custom-content-with-media-float {
    0% {
        transform: rotate(0deg) translate3d(0.5rem, 0, 0) rotate(0deg) rotate(0deg);
    }
    25% {
        transform: rotate(90deg) translate3d(0.5rem, 0, 0) rotate(-90deg) rotate(2.5deg);
    }
    50% {
        transform: rotate(180deg) translate3d(0.5rem, 0, 0) rotate(-180deg) rotate(5deg);
    }
    75% {
        transform: rotate(270deg) translate3d(0.5rem, 0, 0) rotate(-270deg) rotate(2.5deg);
    }
    100% {
        transform: rotate(360deg) translate3d(0.5rem, 0, 0) rotate(-360deg) rotate(0deg);
    }
}