@media (prefers-reduced-motion: no-preference) {
    @keyframes from-left {
        from {
            opacity: 0;
            transform: translateX(-500px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes from-right {
        from {
            opacity: 0;
            transform: translateX(500px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .columns.left img {
        animation: from-left linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }

    .columns.left > .column.col-6:first-of-type {
        animation: from-right linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }

    .columns.right img {
        animation: from-right linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }

    .columns.right > .column.col-6:first-of-type {
        animation: from-left linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }
}


.modular-highlights {
text-align: center;
}
.modular-highlights.offset-box .frame-box {
margin: -3rem -1.4rem 3rem;
padding: 1rem 1rem;
background: #fff;
box-shadow: 0 0 75px 0 rgba(69, 77, 93, 0.1);
}
.modular-highlights.small .columns {
margin-top: -1rem;
}
.modular-highlights.small .highlight-image {
display: block;
justify-content: left;
}
.modular-highlights.small .highlight-image h6 {
text-transform: none;
}
.modular-highlights .frame-box {
padding: 3rem 0;
}
.modular-highlights .frame-box > p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.modular-highlights .column {
padding: 1rem;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 350px;
overflow: hidden;
}
.modular-highlights .column:hover .highlight-detail {
color: #667189;
transform: translateY(-260px);
}
.modular-highlights .highlight-detail {
width: auto;
height: 350px;
position: relative;
padding: 14px 24px;
background: #fff;
transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.5, 1.03);
}
.modular-highlights .highlight-image {
font-size: 130px;
height: 200px;
width: 100%;
color: #e7e9ed;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 1rem 0;
}
.modular-highlights .highlight-detail h6 {
line-height: 1;
z-index: 1;
text-transform: uppercase;
font-weight: 600;
margin: 0;
display: block;
color: #acb3c2;
padding: 5px 0 10px 0;
}
.modular-highlights .highlight-content {
color: #acb3c2;
}

#footer .container {
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    margin: 0;
    white-space: nowrap;
    max-width: none;
}