.feature-grid {
    color: rgb(var(--color-white));
    background: rgb(var(--color-dark-gray));

    > .container {
        padding: var(--space-sections-xs) 0;

        > h2 {
            font-size: var(--font-size-ml);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-ml);
            margin-bottom: var(--space-8);
            margin-top: var(--space-0);
        }

        > p {
            max-width: 100%;
            margin-bottom: var(--space-16);
            font-size: var(--font-size-m);
            font-weight: var(--font-weight-thin);
            line-height: var(--line-height-m);
        }

        > .feature-grid-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: var(--space-4);
            grid-row-gap: var(--space-14);

            > .feature-grid-item {
                > .feature-grid-item-title {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    gap: var(--space-2);
                    margin-bottom: var(--space-8);

                    > i {
                        font-size: 24px;
                        font-weight: unset;
                    }

                    > h3 {
                        font-weight: var(--font-weight-bold);
                        font-size: var(--font-size-m);

                        > a {
                            color: inherit;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                > p {
                    opacity: var(--opacity-700);
                    width: 90%;
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .feature-grid {
        > .container {
            padding: var(--space-sections-xs) var(--space-4);
            text-align: left;

            > .feature-grid-items {
                grid-template-columns: 1fr;
                grid-row-gap: var(--space-12);
                justify-items: start;

                > .feature-grid-item {
                    > .feature-grid-item-title {
                        justify-content: start;

                        > i {
                            font-size: 24px;
                        }

                        > h3 {
                            font-size: var(--font-size-m);
                        }
                    }
                }
            }
        }
    }
}