:root {
    --min-width-diptych: 300;
    --max-width-diptych: 1440;
    --max-width-diptych-breakpoint: 767;
}

.experience-layouts-shopping-diptych {
    margin-bottom: 0 !important;
}

.diptych {
    max-width: 1440px;
    margin: 0 auto var(--margin_bottom_desktop) auto;
    position: relative;
}

@media screen and (max-width: 767px) {
    .diptych {
        margin-bottom: var(--margin_bottom_mobile);
    }
}

.diptych-link {
    display: flex;
    text-decoration: none !important;
}

.dip-no-link {
    pointer-events: none;
    cursor: default;
}

.diptych-link.large-square-on-right {
    flex-direction: row-reverse;
}

.diptych-link-link:hover {
    text-decoration: none !important;
}

.diptych-large-square {
    position: relative;
    width: 49%;
    max-width: calc(720px - 1%);
    margin-right: 1%;
    padding-bottom: 49%;
}

.diptych-large-square.large-square-on-right {
    margin-right: 0;
    margin-left: 1%;
}

.diptych-square-group {
    width: 49%;
    max-width: calc(720px - 1%);
    margin-left: 1%;
    display: flex;
    flex-direction: column;
}

.diptych-square-group.large-square-on-right {
    margin-left: 0;
    margin-right: 1%;
}

@media screen and (max-width: 767px) {
    .diptych-link {
        flex-direction: column;
    }

    .diptych-link.large-square-on-right {
        flex-direction: column;
    }

    .diptych-link.large-square-on-bottom {
        flex-direction: column-reverse;
    }

    .diptych-large-square,
    .diptych-large-square.large-square-on-right,
    .diptych-square-group {
        margin: 0 0 3vw 0;
        width: 100%;
        max-width: unset;
    }

    .diptych-large-square {
        padding-bottom: 100%;
    }
    .diptych-large-square.text-shrink-mobile{
        padding-bottom: 50%;
    }

    .diptych-large-square.no-background {
        padding-bottom: 0;
    }

    .diptych-large-square.large-square-on-bottom {
        margin-bottom: 0;
    }

    .diptych-rectangle.no-background {
        padding-bottom: 0;
    }
}

.diptych-square-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.diptych-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: var(--focal-point-x) var(--focal-point-y);
    width: 100%;
    height: 100%;
}

.diptych-textbox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    padding: 10%;
}

.diptych-large-square-inner {
    background: var(--background_color_desktop_large_square);
    border: 2px solid var(--border_color_desktop_large_square);
}

@media screen and (max-width: 767px) {
    .diptych-large-square-inner {
        background: var(--background_color_mobile_large_square);
        border: 2px solid var(--border_color_mobile_large_square);
    }

    .diptych-large-square.no-background .diptych-large-square-inner {
        position: static;
    }

    .diptych-large-square.no-background .diptych-large-square-inner .diptych-textbox {
        padding: 0 3%;
    }
}

.diptych-callout-large-square {
    color: var(--callout_color_desktop);
    font-weight: var(--callout_font_weight);
    font-family: var(--callout_font_family), sans-serif;
    margin-bottom: var(--callout_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .diptych-callout-large-square {
        color: var(--callout_color_mobile);
        margin-bottom: var(--callout_margin_bottom_mobile);
    }
}

.diptych-heading-large-square {
    color: var(--heading_color_desktop);
    font-weight: var(--heading_font_weight);
    font-family: var(--heading_font_family), sans-serif;
    margin-bottom: var(--heading_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .diptych-heading-large-square {
        color: var(--heading_color_mobile);
        margin-bottom: var(--heading_margin_bottom_mobile);
    }
}

.diptych-subheading-large-square {
    color: var(--subheading_color_desktop);
    font-weight: var(--subheading_font_weight);
    font-family: var(--subheading_font_family), sans-serif;
    margin-bottom: var(--subheading_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .diptych-subheading-large-square {
        color: var(--subheading_color_mobile);
        margin-bottom: var(--subheading_margin_bottom_mobile);
    }
}

.diptych-button-large-square {
    display: inline-block;
    float: none;
    background: var(--button_background_color_desktop, transparent);
    border: 1px solid var(--button_border_color_desktop);
    color: var(--button_text_color_desktop);
    height: 40px;
    line-height: normal;
    border-radius: 20px !important;
    padding: 0 20px;
    margin: 0;
    font-family: var(--button_font);
    font-weight: 900;
    transition: all 0.2s ease;
}

.diptych-button-large-square:hover {
    border: 1px solid var(--button_hover_border_color_desktop);
    background: var(--button_hover_background_color_desktop, transparent);
    color: var(--button_hover_text_color_desktop);
}

.diptych-button-large-square:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--button_hover_border_color_desktop) !important;
}

@media screen and (max-width: 767px) {
    .diptych-button-large-square {
        border: 1px solid var(--button_border_color_mobile);
        background: var(--button_background_color_mobile, transparent);
        color: var(--button_text_color_mobile);
    }

    .diptych-button-large-square:hover {
        border: 1px solid var(--button_hover_border_color_mobile);
        background: var(--button_hover_background_color_mobile, transparent);
        color: var(--button_hover_text_color_mobile);
    }
}


/* SET MIN FONT SIZES */
.diptych-callout-large-square {
    font-size: calc(var(--callout_min_font_size, 12) * 1px);
    line-height: calc(var(--callout_min-font-line-height, 12) * 1px);
}

.diptych-heading-large-square {
    font-size: calc(var(--heading_min_font_size, 12) * 1px);
    line-height: calc(var(--heading_min-font-line-height, 12) * 1px);
}

.diptych-subheading-large-square {
    font-size: calc(var(--subheading_min_font_size, 12) * 1px);
    line-height: calc(var(--subheading_min-font-line-height, 12) * 1px);
}

/* SCALE FONT SIZES */
@media screen and (min-width: 768px) {
    .diptych-callout-large-square {
        font-size: calc(
            var(--callout_min_font_size, 12) * 1px + (var(--callout_max_font_size, 19) - var(--callout_min_font_size, 12)) * ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--callout_min_font_line_height, 2) * 1px + (var(--callout_max_font_line_height, 6) - var(--callout_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
    }

    .diptych-heading-large-square {
        font-size: calc(
            var(--heading_min_font_size, 12) * 1px + (var(--heading_max_font_size, 19) - var(--heading_min_font_size, 12)) * ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--heading_min_font_line_height, 2) * 1px + (var(--heading_max_font_line_height, 6) - var(--heading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
    }

    .diptych-subheading-large-square {
        font-size: calc(
            var(--subheading_min_font_size, 12) * 1px + (var(--subheading_max_font_size, 19) - var(--subheading_min_font_size, 12)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--subheading_min_font_line_height, 2) * 1px + (var(--subheading_max_font_line_height, 6) - var(--subheading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych) - var(--min-width-diptych)))
        );
    }
}

@media screen and (max-width: 767px) {
    .diptych-callout-large-square {
        font-size: calc(
            var(--callout_min_font_size, 12) * 1px + (var(--callout_max_font_size, 19) - var(--callout_min_font_size, 12)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--callout_min_font_line_height, 2) * 1px + (var(--callout_max_font_line_height, 6) - var(--callout_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
    }

    .diptych-heading-large-square {
        font-size: calc(
            var(--heading_min_font_size, 12) * 1px + (var(--heading_max_font_size, 19) - var(--heading_min_font_size, 12)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--heading_min_font_line_height, 2) * 1px + (var(--heading_max_font_line_height, 6) - var(--heading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
    }

    .diptych-subheading-large-square {
        font-size: calc(
            var(--subheading_min_font_size, 12) * 1px + (var(--subheading_max_font_size, 19) - var(--subheading_min_font_size, 12)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
        line-height: calc(
            var(--subheading_min_font_line_height, 2) * 1px + (var(--subheading_max_font_line_height, 6) - var(--subheading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-diptych) * 1px) / (var(--max-width-diptych-breakpoint) - var(--min-width-diptych)))
        );
    }
}

/* SET MAX FONT SIZES */
@media screen and (min-width: 1440px) {
    .diptych-callout-large-square {
        font-size: calc(var(--callout_max_font_size, 19) * 1px);
        line-height: calc(var(--callout_max_font_line_height, 6) * 1px);
    }

    .diptych-heading-large-square {
        font-size: calc(var(--heading_max_font_size, 19) * 1px);
        line-height: calc(var(--heading_max_font_line_height, 6) * 1px);
    }

    .diptych-subheading-large-square {
        font-size: calc(var(--subheading_max_font_size, 19) * 1px);
        line-height: calc(var(--subheading_max_font_line_height, 6) * 1px);
    }
}