.blog {
    box-sizing: border-box;
    max-width: var(--max-width);
    margin: calc(var(--unit) * 3) auto 0 auto;
    padding: 0 var(--site-padding);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: calc(var(--unit) * 4);

    @media screen and (min-width: 600px) {
        grid-template-columns: 2fr 8fr 2fr;
    }

    .blog-item-type {
        text-transform: uppercase;
        opacity: 0.6;
    }

    .blog-item {
        grid-column-start: 2;
    }

    h3 {
        font-size: calc(var(--fontsize) * 1.75);
        font-weight: 200;
    }

    .more-button {
        grid-area: cta;
        font-weight: 400;
    }

    .more-button-arrow {
        display: inline-block;
        transform: translateX(calc(var(--unit) * -2));
        opacity: 0;
        transition: transform .45s var(--easier), opacity .45s var(--easier);
    }

    .more-button-name {
        display: inline-block;
        transform: translateX(calc(var(--unit) * -2));
        transition: transform .45s var(--easier);
    }

    @media (hover) {
        .more-button:hover .more-button-arrow {
            transform: translateX(calc(var(--unit) * 2));
            opacity: 1;
        }

        .more-button:hover .more-button-name {
            transform: translateX(calc(var(--unit) * 2));
            transition: transform .45s var(--easier);
        }
    }
}