How to style teasers

.native-teaser {
    --spacing: 15px;
    --marking-color: #ffcd00;
    --background-color: #fff;
    --advertiser-color: #c33;

    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--background-color);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 2px;
    overflow: hidden;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    border-bottom: 4px solid var(--marking-color);
}

@media (prefers-color-scheme: dark) {
    .native-teaser {
        --marking-color: #24517a;
        --background-color: #24292e;
        --advertiser-color: #c33;
    }
}

.native-teaser-marking {
    color: var(--text-color);
    background: var(--marking-color);
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    padding-left: calc(var(--spacing) / 2);
    vertical-align: middle;
    line-height: 24px;
    letter-spacing: 1px;
}

.native-teaser-advertiser {
    margin-right: 8px;
    text-transform: uppercase;
    color: var(--advertiser-color);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.8px;
}

.native-teaser-content {
    display: flex;
    flex-direction: column;
}

.native-teaser-image {
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.native-teaser-image > img {
    display: block;
    width: 100%;
}

.native-teaser-text {
    padding: calc(var(--spacing));
}

.native-teaser-headline {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

@media (min-width: 576px) {
    .native-teaser-content {
        flex-direction: row;
        padding: var(--spacing);
    }

    .native-teaser-text {
        margin-left: var(--spacing);
        padding: 0;
        flex: 2;
    }

    .native-teaser-image {
        max-height: none;
        flex: 1;
    }
}

@media (min-width: 768px) {
    .native-teaser-headline {
        font-size: 24px;
    }
}