div.features-section {
    padding: 0 1rem;
    margin: auto;
    display: grid;
    grid-auto-flow: row;
}

div.features-section div {
    display: flex;
    line-height: 160%;
}

div.features-section div p {
    margin: 1rem 0;
}

.feature-icon {
    height: 32px;
    padding-top: 1rem;
}

@media screen and (max-width: 45rem) {
    div.features-section {
        grid-template-columns: auto;
    }
}
@media screen and (min-width: 45rem) and (max-width: 60rem) {
    div.features-section {
        grid-template-columns: auto auto;
    }
}
@media screen and (min-width: 60rem) {
    div.features-section {
        grid-template-columns: auto auto auto;
    }
}

/* Filters recoloring the icons to --color-on-background: generated with
https://codepen.io/sosuke/pen/Pjoqqp
*/
@media(prefers-color-scheme: light) { img.feature-icon {
    filter: invert(17%) sepia(2%) saturate(4058%) hue-rotate(170deg) brightness(93%) contrast(81%);
} }
@media(prefers-color-scheme: dark) { img.feature-icon {
    filter: invert(94%) sepia(9%) saturate(154%) hue-rotate(168deg) brightness(88%) contrast(97%);
} }

