#hero {
    background-color: var(--sage);
}

#hero .title {
    color: var(--light);
}

#hero .description {
    max-width: 40ch;
    margin: 0 auto;
    color: var(--light);
}

#hero .cta_link {
    color: var(--light);
    background-color: var(--sage);
    border-color: var(--light);
}

#hero .cta_link:focus,
#hero .cta_link:active {
    color: var(--sage);
    background-color: var(--light);
}

#store .description {
    max-width: 60ch;
    margin: 0 auto;
}

#benefits {
    background-color: var(--sage);
}

#benefits .subtitle {
    color: var(--light);
}

#about .section_container {
    gap: 0;
}

#about .section_group {
    height: 270px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--light);
}

#about .section_group:nth-child(odd) {
    border-left: 1px solid var(--sage);
    border-bottom: 1px solid var(--sage);
    border-bottom-left-radius: 16px;
}

#about .section_group:nth-child(even) {
    border-right: 1px solid var(--sage);
    border-bottom: 1px solid var(--sage);
    border-bottom-right-radius: 16px;
}

#about .description {
    max-width: 60ch;
}

@media only screen and (min-width: 960px) {
    #hero .description {
        max-width: 48ch;
    }

    #hero .cta_link:hover {
        color: var(--sage);
        background-color: var(--light);
    }
}

@media only screen and (min-width: 1280px) {
    #hero .section_container {
        flex-direction: row;
        align-items: center;
    }

    #store .section_container {
        flex-direction: row-reverse;
        align-items: center;
    }

    #benefits .section_container {
        flex-direction: row;
        align-items: center;
    }
}