/* 2 COLUMN */
section.x2column{
}

section.x2column .row.content-cols{
    min-height: 400px;
}

section.x2column div.image{
    position:relative;
    height:0;
    padding-bottom:50%;
    background-size:cover;
    background-position:center center;
}

section.x2column div.content {
    padding: 5%;
    display: flex;
    align-items: center;
}


@media screen and (min-width:1200px){

}

/* FEATURE SECTION */

.feature-section{
    position:relative;
}

.feature-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 10;
}

.feature-section .image-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.feature-section .image {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.feature-section .wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 5%;
    padding-bottom: 5%;
    display: flex;
    justify-content: flex-end;
    z-index: 20;
    min-height: 600px;
    align-items: center;
}

.feature-section .wrapper.reverse{
    justify-content: flex-start;
}

.feature-section .wrapper .content {
    position: relative;
    background: rgba(203, 109, 81, 0.66);
    max-width: 500px;
    width: 100%;
    padding: 2rem;
    color: #fff;
    backdrop-filter: blur(16px);
    border-radius:5px;
}

@media screen and (max-width:540px){
    .feature-section .wrapper .content {
        padding:1rem;
    }
}