main {
    background-color: var(--bg-secondary);
    padding: 4rem 0;
    position: relative;
    
}

.feature {
    margin-bottom: 4rem;
}


.features h2 {
    color: var(--cl-accent);
    text-shadow: 3px 2px 0 black;
    
}

.features h3 {
   
    text-shadow: 1px 1px 0 black;
    
}

.features .content {
    position: relative;
    bottom: 2.5rem;
}

/* RESPONSIVE SECTION */ 

@media screen and (min-width: 810px) {
    
    main {
        padding: 10rem 0;
    }

    .feature {
        display: flex;
        align-items: center;
        gap: 3vw;
        margin-bottom: 10rem;
        border-right: 0.75rem solid var(--cl-accent);
        padding: 4rem 0;
    }
    

    .feature figure {
        flex: 3;
       
    }

    .feature .content {
        flex: 1;
        position: static;
        padding: 0 2rem;
    }
}

    .feature:nth-child(even) {
        flex-direction: row-reverse;
        border-left: 0.75rem solid var(--cl-accent);
        border-right: none;
    }