.dual-image {
    padding: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

.dual-image-inner {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 2px;
}

.dual-image.has-mobile-offset .dual-image-inner {
    gap: 0;
}

.dual-image.text-align-left .dual-image-inner {
    margin-right: auto;
}

.dual-image.text-align-center .dual-image-inner {
    margin-left: auto;
    margin-right: auto;
}

.dual-image.text-align-right .dual-image-inner {
    margin-left: auto;
}

.dual-image .item {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dual-image .item.first-item {
    order: 1;
}

.dual-image .item.second-item {
    order: 2;
}

.dual-image.has-mobile-offset .item {
    width: calc(100% - 20px);
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2);
}

.dual-image .item-1 {
    z-index: 1;
    margin: 0;
}

.dual-image.has-mobile-offset .item-1 {
    margin-bottom: -20px;
}

.dual-image.text-align-left .item-1 {
    margin-right: auto;
}

.dual-image.text-align-right .item-1 {
    margin-left: auto;
}

.dual-image.has-mobile-offset.layout-portrait-first .item-1 {
    margin-top: -20px;
}

.dual-image.has-mobile-offset .item-2 {
    margin-top: -20px;
}

.dual-image.text-align-left .item-2 {
    margin-left: auto;
}

.dual-image.text-align-right .item-2 {
    margin-right: auto;
}

.dual-image.has-mobile-offset.layout-portrait-first .item-2 {
    margin-bottom: -20px;
}

.dual-image .image-wrapper {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc((100% - 20px) * 0.65) 0 0;
    margin: 0;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.3s ease-out;
}

.dual-image .item:hover .image-wrapper {
    transform: scale(1.1);
}

.dual-image img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
}

.dual-image .content-wrapper {
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 28px;
    text-align: center;
    padding: 20px;
}

.dual-image.has-mobile-offset:not(.has-button) .item-2 .content-wrapper {
    padding-top: 40px;
}

.dual-image.has-mobile-offset.has-button:not(.layout-portrait-first) .item-2 .content-wrapper {
    padding-top: 60px;
}

.dual-image.has-mobile-offset.has-button.layout-portrait-first .item-2 .content-wrapper {
    padding-bottom: 60px;
}

.dual-image .content-wrapper h2,
.dual-image .content-wrapper span {
    color: inherit;
    font-size: inherit;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    text-shadow: 0 0 5px rgba(0,0,0,0.6);
    margin-top: 0;
    margin-bottom: 0;
    hyphens: auto;
}

.dual-image .content-wrapper h2 {
    font-weight: 400;
    text-transform: uppercase;
}

.dual-image .item-1 .content-wrapper h2 {
    font-family: "Cormorant Infant", serif;
    font-size: 1.1em;
    font-weight: 700;
    font-style: italic;
}

.dual-image .image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dual-image .wp-block-buttons {
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
}

.dual-image.has-mobile-offset .wp-block-buttons {
    top: calc(50% - 20px);
}

.dual-image .wp-block-buttons > .wp-block-button {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link {
    position: absolute;
    display: flex;
    align-items: center;
    top: -20px;
    width: auto;
    height: 40px;
    margin: 0 auto;
}

@media (max-width: 767px) {

    .dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link {
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    }

    .dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link.has-primary-background-color {
        background-color: var(--wp--preset--color--primary, #BD9E77) !important;
        border-color: var(--wp--preset--color--primary, #BD9E77);
        color: #ffffff;
    }

    .dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link.has-secondary-background-color {
        background-color: var(--wp--preset--color--secondary, #222222) !important;
        border-color: var(--wp--preset--color--secondary, #222222);
        color: #ffffff;
    }

    .dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link.has-white-background-color {
        background-color: #ffffff !important;
        border-color: #ffffff;
        color: var(--wp--preset--color--primary, #BD9E77);
    }

    .dual-image .wp-block-buttons > .wp-block-button > .wp-block-button__link.has-white-background-color:hover {
        opacity: 1;
    }

}

@media (min-width: 768px) {

    .dual-image.rearrange-elements-tablet .dual-image-inner {
        flex-direction: row;
    }

    .dual-image.rearrange-elements-tablet:not(.has-mobile-offset) .item {
        box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2);
    }

    .dual-image.rearrange-elements-tablet .item-1,
    .dual-image.rearrange-elements-tablet.has-mobile-offset .item-1 {
        width: calc(60% + 20px);
        margin: 0 -20px 0 0;
    }

    .dual-image.rearrange-elements-tablet.layout-portrait-first .item-1 {
        margin: 0 0 0 -20px;
    }

    .dual-image.rearrange-elements-tablet .item-2,
    .dual-image.rearrange-elements-tablet.has-mobile-offset .item-2 {
        width: calc(40% + 20px);
        margin: 0 0 0 -20px;
    }

    .dual-image.rearrange-elements-tablet.layout-portrait-first .item-2 {
        margin: 0 -20px 0 0;
    }

    .dual-image.rearrange-elements-tablet .item-2 .image-wrapper {
        padding-top: 140%;
    }

    .dual-image.rearrange-elements-tablet .content-wrapper {
        padding: 60px 50px!important;
    }

    .dual-image.rearrange-elements-tablet .wp-block-buttons,
    .dual-image.rearrange-elements-tablet.has-mobile-offset .wp-block-buttons {
        top: calc(100% - 17.5%);
        right: 0;
    }

    .dual-image.rearrange-elements-tablet .wp-block-buttons > .wp-block-button > .wp-block-button__link,
    .dual-image.rearrange-elements-tablet.has-mobile-offset .wp-block-buttons > .wp-block-button > .wp-block-button__link {
        top: 20px;
        right: calc(40% + 40px);
    }

    .dual-image.rearrange-elements-tablet.layout-portrait-first .wp-block-buttons > .wp-block-button > .wp-block-button__link {
        left: calc(40% + 40px);
        right: initial;
    }

}

@media (min-width: 1200px) {

    .dual-image.rearrange-elements-pc .dual-image-inner {
        flex-direction: row;
    }

    .dual-image.rearrange-elements-pc:not(.has-mobile-offset) .item {
        box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2);
    }

    .dual-image.rearrange-elements-pc .item-1,
    .dual-image.rearrange-elements-pc.has-mobile-offset .item-1 {
        width: calc(60% + 20px);
        margin: 0 -20px 0 0;
    }

    .dual-image.rearrange-elements-pc.layout-portrait-first .item-1 {
        margin: 0 0 0 -20px;
    }

    .dual-image.rearrange-elements-pc .item-2,
    .dual-image.rearrange-elements-pc.has-mobile-offset .item-2 {
        width: calc(40% + 20px);
        margin: 0 0 0 -20px;
    }

    .dual-image.rearrange-elements-pc.layout-portrait-first .item-2 {
        margin: 0 -20px 0 0;
    }

    .dual-image.rearrange-elements-pc .item-2 .image-wrapper {
        padding-top: 140%;
    }

    .dual-image.rearrange-elements-pc .content-wrapper {
        padding: 60px 50px!important;
    }

    .dual-image.rearrange-elements-pc .wp-block-buttons,
    .dual-image.rearrange-elements-pc.has-mobile-offset .wp-block-buttons {
        top: calc(100% - 17.5%);
        right: 0;
    }

    .dual-image.rearrange-elements-pc .wp-block-buttons > .wp-block-button > .wp-block-button__link,
    .dual-image.rearrange-elements-pc.has-mobile-offset .wp-block-buttons > .wp-block-button > .wp-block-button__link {
        top: 20px;
        right: calc(40% + 40px);
    }

    .dual-image.rearrange-elements-pc.layout-portrait-first .wp-block-buttons > .wp-block-button > .wp-block-button__link {
        left: calc(40% + 40px);
        right: initial;
    }

}