.side-by-side-v2-1-across {
    margin-inline: 20px;
    padding-block: 35px 45px;
    position: relative;
}

.side-by-side-v2-1-across .widget-inner::before,
.side-by-side-v2-1-across .widget-inner::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 962px;
}

.side-by-side-v2-1-across .widget-inner::before {
    background-color: var(--gray-f4);
    z-index: -1;
}


.side-by-side-v2-1-across .widget-inner::after {
    background-image: url(/includes/public/assets/shared/decorations/rushmore.svg);
    background-repeat: no-repeat;
    background-position: bottom 30px right 30px;
    background-size: 95px;
    opacity: 0.3;
    pointer-events: none;
}

.side-by-side-v2-1-across::before,
.side-by-side-v2-1-across::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    display: block;
    width: 100%;
    max-width: 962px;
    height: 11px;
    background-image: url(/includes/public/assets/shared/mtn-pattern-gray.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1920px;
}

.side-by-side-v2-1-across::before {
    top: 0;
    translate: -50% -100%;
}
.side-by-side-v2-1-across::after {
    transform-origin: center;
    rotate: 180deg;
    bottom: 0;
    translate: -50% 95%;
}

.side-by-side-v2-1-across .widget-header {
    display: grid;
    place-items: center;
    max-width: 758px;
    margin-inline: auto;
}

.side-by-side-v2-1-across .widget-title,
.side-by-side-v2-1-across .widget-subtitle,
.side-by-side-v2-1-across .widget-desc {
    text-align: center;
}

.side-by-side-v2-1-across .view-all-col {
    justify-content: center;
}

.side-by-side-v2-1-across .slides {
    position: relative;
    gap: 30px;
    max-width: 1200px;
}

.side-by-side-v2-1-across .slide-top {
    margin-block-end: 12px;
}

.side-by-side-v2-1-across .img-cont {
    border-radius: 10px;
}

.side-by-side-v2-1-across .content-section {
    gap: 5px;
}

.side-by-side-v2-1-across .slide-title {
    font-size: 1.375rem;
    line-height: calc(28/22);
}

.side-by-side-v2-1-across .slide-desc {
    font-size: 1rem;
    line-height: calc(24/16);
    color: var(--gray-54);
}

.side-by-side-v2-1-across .details {
    font-size: 0.875rem;
}

.side-by-side-v2-1-across .info-flag {
    font-family: var(--font-damion);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--blue-2d);
    line-height: calc(24/20);
}


/* transparent bg */
.side-by-side-v2-1-across .slide-footer .read-more {
    color: var(--sw-button-secondary-color);
    background-color: transparent;
    padding-inline-start: 0;

    &::before {
        width: calc(100% - 14px);
        left: 0;
        background-color: var(--green-68);
    }

    &::after {
        background-image: var(--sw-button-after-bg-img-desk-green);
        opacity: 1;
        transition: background-image var(--transition-appendix);
    }

    &:hover {
        background-color: transparent;
        color: var(--black-11);

        &::before {
            background-color: var(--sw-button-before-bg-color);
        }

        &::after {
            background-image: var(--sw-button-after-bg-img-desk);
        }
    }
}

@media screen and (min-width: 40em) {
    .side-by-side-v2-1-across {
        padding-block: 40px 60px;
    }

    .side-by-side-v2-1-across .widget-inner::after {
        background-size: 129px;
    }

    .side-by-side-v2-1-across .slide > .inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 0;
    }

    .side-by-side-v2-1-across .content-section {
        padding-inline: 40px;
        place-self: center;
    }

    .core-v2-side-by-side.slide-right .slide-top, .core-v2-side-by-side.slide-left.alternating .slide:nth-child(even) .slide-top, .core-v2-side-by-side.slide-right.alternating .slide:nth-child(even) .content-section {
        order: 1;
    }
    
    .side-by-side-v2-1-across .widget-inner:has(.slide:last-child.content-left):after {
        background-position: bottom 30px left 30px;
    }
}

@media screen and (min-width: 64em) {
    .side-by-side-v2-1-across .info-flag {
        font-size: 1.6875rem;
    }

    .side-by-side-v2-1-across .slide-title {
        font-size: 2.1875rem;
    }

    .side-by-side-v2-1-across .slide-desc {
        font-size: 1.25rem;
        line-height: calc(30/20);
    }
}