:root {
    --h1-font-size: 3rem;
    --body-margin: 16px;
}

/* layout */

body {
    margin: var(--body-margin);
}

.section {
    width: 100%;

    &.header {
        /* styles for header section */
    }

    &.hero {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: var(--body-margin);
    }
    &.articles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 16px;
    }
}

.header {
    &.title {
        color: inherit;
    }
    &.social {
        display: flex;
        flex-direction: row;
        width: fit-content;
        gap: 8px;
    }
}

.social {
    &.item {
        color: inherit;
    }
}

.hero {
    &.first {
        display: block;
    }
    &.hero.second {
        grid-column: 2 / -1;
        width: 100%;

        img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            display: block;
        }
    }
}

.articles {
    &.item {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 8px;

        img, a {
            grid-column: 2 / -1;
            width: 100%;
            object-fit: cover;
            display: block;
        }

        img {
            min-height: 30%;
            max-height: 50%;
        }
    }
}

/* text */

.hero {
    .description {
        font-size: calc(var(--h1-font-size) / 2);
    }
    .date {
        font-size: calc(var(--h1-font-size) / 3);
    }
}

.item {
    &.first {

    }
    &.twitter {
        color: deepskyblue;
    }
    &.instagram {
        color: magenta;
    }
    &.linkedin {
        color: blue;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color: #dedfd0;
        background-color: #1d1f1e;
    }
}

.first {
    &.title {
        color: inherit;
        font-size: calc(var(--h1-font-size) / 2);
    }
    &.description {
        
    }
    &.date {
        font-size: calc(var(--h1-font-size) / 3);
        opacity: 0.75;
    }
}

h1 {
    font-size: var(--h1-font-size);
    margin: 16 0;
}

h2 {
    font-size: calc(var(--h1-font-size) / 1.5);
    margin: 16 0;
}

h3 {
    font-size: calc(var(--h1-font-size) / 2);
    margin: 16 0;
}

p, a, ul, ol, li {
    font-size: calc(var(--h1-font-size) / 2.5);
    color: inherit;
}