.hero {
    height: 50vw;
    display: block;
}

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

    .hero .feature-image {
        background-size: cover;
        background-position: center;
        z-index: 0;
    }

    .hero .hero-title {
        bottom: 20px;
        left: 20px;
        position: absolute;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
        background:#fff;
    }

        .hero .hero-title h2 {
            font-size: 2rem;
        }

.landmark__location__tout {
    height: 100%;
    width: 100%;
    background-image: url('../images/general/devinne_facade.jpg');
    background-image: -webkit-image-set( 
        url('../images/general/devinne_facade.avif') type("image/avif"), 
        url('../images/general/devinne_facade.jpg') type("image/jpeg") );
    background-image: image-set( 
        url('../images/general/devinne_facade.avif') type("image/avif"), 
        url('../images/general/devinne_facade.jpg') type("image/jpeg") );
    background-size: cover;
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #000;
}
.feature-image__1, .feature-image__2 {
    background-size: cover;
}
.two-col {
    display: flex;
    gap: 24px;
    flex-direction:column;
}
.two-col [class^="column-"] {
    flex: 1;
    min-height:15rem;
}
.two-col .tout__card{
    min-height:100%
}
/*TUrn feature containewrs into flexbox*/
@media (min-width:1024px) {
    .hero {
        height: 20vw;
    }

        .hero .hero-title {
            bottom: 30px;
            left: 40px;
        }

    .two-col {
        flex-direction: row;
    }
}