/*********************************************
 * Image with Content: Wedding & events
**********************************************/
.layout-wedding-events .vii-image-content__inner {position:relative;}
.layout-wedding-events .vii-image-content__col.image {width:40%; position:relative; padding-bottom:200px;}
.layout-wedding-events .vii-image-content__col.content {width:60%;}

/* content */
.layout-wedding-events .vii-image-content__content {
    max-width:470px; padding:var(--vii-spacing-40) 20px 0 0;
    margin-left:auto; margin-right:auto;
}

/* image */
.layout-wedding-events .vii-image-content__image {max-width:380px; position:relative; z-index:2;}

/* extra image */
.layout-wedding-events .vii-image-content__extra-image {aspect-ratio:280/193; width:280px;}
.layout-wedding-events .vii-image-content__extra-image img {position:relative; z-index:2;}

/* draw line */
.layout-wedding-events .vii-image-content__connecting-line {bottom:32%; left:85%; transform:rotate(-6deg);}
.layout-wedding-events .vii-image-content__connecting-line path {
    stroke-dasharray:1000; stroke-dashoffset:1000;
}
.animated .vii-image-content__connecting-line path {animation:draw-line 1.2s linear forwards;}
@keyframes draw-line {
    to {stroke-dashoffset:0;}
}

/* Decoration */
.layout-wedding-events .decoration-item.glass {bottom:34%;right:-10%;}

/* layout wedding-events without caption */
.layout-wedding-events.no-caption .vii-image-content__col.image {padding-bottom:240px;}

/* Responsive */
@media only screen and (max-width:1180px) {
    .layout-wedding-events .vii-image-content__connecting-line {bottom:30%; left:42%;}
}
@media only screen and (max-width:1023px) {
    .layout-wedding-events .vii-image-content__connecting-line,
    .layout-wedding-events .vii-image-content__extra-image {display:none;}
    .layout-wedding-events.no-caption .vii-image-content__col.image,
    .layout-wedding-events .vii-image-content__col.image {padding-bottom:0;}
}
@media only screen and (max-width:767px) {
    .layout-wedding-events .vii-image-content__col.image,
    .layout-wedding-events .vii-image-content__col.content {width:100%;}

    .layout-wedding-events .vii-image-content__col.image {text-align:center; margin-bottom:var(--vii-spacing-30); order:-1;}
    .layout-wedding-events .vii-image-content__content {text-align:center; margin-left:auto; margin-right:auto; padding:0;}

    .layout-wedding-events .vii-image-content__image {margin-left:auto; margin-right:auto; max-width:300px;}
}