#hero {
    position: relative;
    padding: calc(132px + clamp(3rem, 10vh, 7rem)) 1rem clamp(4rem, 12vh, 8rem);
    z-index: 0;
    background-color: var(--primaryDark);
    /* ensure it's behind any absolutely positioned children */
}
img {
    max-width: 100%;
}
#hero .container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#hero .text-content {
    margin-bottom: 1rem;
    margin-inline: auto;
}
#hero .hero-img {
    width: 50%;
}
#features .img-box.men {
    display: flex;
    gap: .5rem;
}
#features .img-box svg {
    fill: var(--headerColor);
}
#features .img-box svg.red {
    fill: var(--secondary);
}
#features .feature-list .feature-point {
    margin-top: 1.5rem;
}
#mission {
    background-color: var(--bgColorDark);
}
#mission .text {
    max-width: none;
}
/* Showcase CSS */
#showcase h2 {
    text-align: center;
    margin-bottom: .5em;
}
#showcase .option-select-ul {
    margin-bottom: 1rem;
}
#showcase .option-select-ul .option-select-li {
    list-style: none;
    background-color: var(--headerColorWhite);
    border: 1px solid var(--bodyTextColor);
    border-radius: 1.5rem;
    padding: .5rem 2rem;
    text-align: center;
    margin-bottom: .5rem;
    transition: background-color 0.3s ease, border 0.3s ease;
}
#showcase .option-select-ul .option-select-li.selected {
    background-color: var(--primaryLight);
    border: 1px solid var(--primaryDark);
}
#showcase .preview {
    position: relative;
    height: 48rem;
}
#showcase .preview-select {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#showcase .preview-select.selected {
    opacity: 1;
    transition: opacity 0.2s ease 0.15s;
}    
#showcase .preview-select .text-content {
    margin-bottom: .5rem;
}
#showcase .preview-select .text-content * {
    max-width: none;
}
#showcase .preview-select .img-box {
    order: -1;
    max-width: 300px;
    margin: 0 auto;
}
#showcase .preview-select .text-content ul {
    list-style: inside;
    padding-left: .5em;
}
@media (min-width:64rem) {
    #showcase .preview-select {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 1rem;
    }
}
#matters .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#matters img {
    text-align: center;
}
#matters ul {
    list-style: inside;
    padding-left: .5em;
}
#cta .container {
    text-align: center;
}
#cta .title {
    margin-bottom: .5em;
}
#cta img {
    width: 350px;
    max-width: 100%;
}
@media (min-width: 64rem) {
    #hero .container {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }
    #hero .hero-img {
        max-width: 350px;
    }
    #features .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #features .header .text {
        max-width: 60rem;
    }
    #features .feature-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    #features .feature-list .feature-point{ 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

}
@media (min-width:48rem) {
    #showcase .option-select-ul {
        display: flex;
        justify-content: center;
        gap: 1rem;
        cursor: pointer;
    }
    #matters .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    #matters .container img {
        width: 100%;
    }
}