@import url('/css/article.css');

.article {
    margin-block: var(--space-xxl);
    min-width: var(--article-min-width);
}

.takeaway {
    padding: var(--space-xxs) var(--space-l);
    border-radius: var(--space-xxs);
    margin-block: var(--space-xxl);
    margin-left: var(--space-3xl);
    background: var(--base-variant);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.keywords {
    font-family: 'Roboto', sans-serif;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.keywords h2 {
    font-size: var(--font-size-h6);
    font-weight: bold;
    margin-bottom: var(--space-s);
}

.keywords ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.keywords li {
    float: left;
    padding: 0 var(--space-xxs);
    margin: var(--space-xxs);
    border-left: 2px solid var(--secondary-text);
    background: var(--color-foreground);
}

@media only screen and (max-width: 40rem) {
    .takeaway {
        margin-left: 0;
    }
}