.homepage-feature_list{
    display: flex;
    gap: 1rem;

    justify-content: center;
}

.homepage-main {
    display: flex;
    gap: 1rem;

    justify-content: center;;
}

h1.homepage-title {
    font-weight: 600;
    font-size: 3rem;
    margin-bottom: 0;
}

.homepage-inner{
    flex: 0 1 700px;

    background-color: var(--md-default-bg-color--light);
    padding: 1rem 1.5rem;
    
    border-radius: 5px;
    border: 1px solid var(--doc-border);
}

.homepage-code_example{
    flex: 0 1 600px;
    padding: 0 2rem;

    background-color: var(--md-default-bg-color--light);
    padding: 0.75rem 1.5rem 1rem;

    border-radius: 5px;
    border: 1px solid var(--doc-border);
}

.homepage-feature {
    flex: 0 1 400px;
    background-color: var(--md-default-bg-color--light);
    padding: 0.75rem 1.5rem 1rem;

    border-radius: 5px;
    border: 1px solid var(--doc-border);
    background-image: var(--doc-gradient);
}

.feature-title {
    font-weight: 600;
    line-height: 2rem;
}

.feature-desc {
    font-size: medium;
    color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 80em) {
    .homepage-feature_list {
        flex-direction: column;
        padding: 0 1rem;
    }

    .homepage-feature {
        flex: 0 1 100px;
    }

    .homepage-code_example {
        display: none;
    }
}