section.features-overview {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    width: 100%;
    background-color: #0B291A;
    .container {
        max-width: 80rem;
        margin: 0 auto;
        padding: 9.5rem 0 6rem 0;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, 1fr);        
    }
    .intro {
        margin: 0 0 1.5rem 0;
        p, h4, li {
            color: #FFF !important;
        }
    }
    .intro-content {
        padding: 0.75rem 0 0 0;
    }
    .content-column {
        padding: 0 5rem 0 0;
    }
    .image-column {
      position: relative;
      margin: 0 0 0 3rem;
    }
    .feature-image {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      display: flex;
      justify-content: center;
      flex-flow: column;
      align-items: center;
      transition: opacity 200ms ease;
    }
    .feature-image.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    .feature-image img {
      display: block;
      width: 100%;
      height: auto;
    }
    .features {        
        position: relative;
        /* Testing */
        overflow: hidden;
        min-height: 550px;        
    }
    .feature {
        cursor: pointer;
        &:not(:last-child) {
            border-bottom: 1px solid #2D633950;
            margin: 0 0 1rem 0;
            padding: 0 0 1rem 0;
        }
        &:hover {
            .progress-bar {
                  stroke: #CCF88E; 
            }
            p.title, .feature-index {
                color: #FFF;
            }
        }
    }
    .title-container {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .feature-number {
        position: relative;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .feature-number .progress-circle {
        display: block;
    }
    .progress-bar {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        stroke: #274A34; 
        transition: stroke 300ms ease;
    }
    .feature.is-open .progress-bar {
        stroke: #CCF88E;
    }
    .feature.is-open p.title{
        color: #FFF;
    }
    .feature.is-open .feature-index {
        color: #FFF;
    }
    .feature-index {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;        
        color: #ffffff40;        
        pointer-events: none;
        transition: all 300ms ease;
    }
    .content-container {
        overflow: hidden;
        height: 0;
        opacity: 0;
        cursor: auto;
        transition: opacity .45s ease;
        ul, ol {
            margin: 0;
            padding: 0 1rem 0 1rem;
            text-align: left;
        }
        p {
            text-align: left;
            color: #FFF !important;
        }
        li {
            padding: 0;        
            margin: 0 0 0.9rem 0;
            color: #FFF !important;
            &:last-child {
                margin: 0 0 1rem 0;
            }
        }
    }    
    .feature.is-open .content-container {
        overflow: visible;
        /* height: auto;
        opacity: 1; */
    }
    .content {        
        padding: 0 0 0 4.2rem;
    }
    p.legal, p.mobile-legal{
        font-size: 0.75rem;
        color: #CCF88E !important;
        margin: 2.5rem 0 0 0;
        text-align: center;
    }
    p.mobile-legal { 
        display: none;
        padding: 0;
    }
    p.title {
        font-size: clamp(1.25rem, calc(1.25rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 1.5rem);
        font-weight: bold;
        padding: 0;
        color: #FFFFFF40;
        transition: all 300ms ease;
    }
    h4 {
        font-size: clamp(1.75rem, calc(1.75rem + 0.75 * ((100vw - 23.4375rem) / 66.5625)), 2.5rem);
        font-weight: bold;
        line-height: 1;
    }
    .mobile-feature-image {
        display: none;
        background-color: #274A34;
        border-radius: 1rem;
        padding: 2rem;
        width: 100%;
        margin: 0 0 1rem 0;
    }
    @media (max-width: 1320px) {
         .container {
            padding: 6rem 1.5rem;
         }
    }
    @media (max-width: 1280px) {
        .features {                                    
            min-height: 500px;
        }
    }
    @media (max-width: 1024px) {
        .container {
            grid-template-columns: 1fr;
            padding: 4rem 1.5rem;
        }
        .content {
            padding: 0.5rem 0 1rem 0.15rem;
        }
        .image-column {
            display: none;
        }
        p.mobile-legal {
            display: block;
            margin: 1rem 0 0 0;
        }
        .mobile-feature-image {
            display: block;
        }
        .content-column {
            padding: 0;
        }
    }
    @media (min-width: 782px) and (max-width: 1024px) {
        .mobile-feature-image {
            width: 500px;
            margin: 0 auto;
        }
    }
    @media (max-width: 782px) {
        .container {
            padding: 3rem 0;
        }
        .features, .intro {
            padding: 0 1.5rem;
        }
        .feature-number {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
        }
        .feature-index {
            font-size: 0.8rem;
        }
        p.legal, p.mobile-legal {
            margin: 1rem 0 0 0;
        }
    }
}