header h1 {
    grid-column: 2 / -2;
}
.article-posts {
    gap: var(--grid-gap);
}
.article-posts > div > div {
    grid-column: 2 / -2;
    grid-template-columns: repeat(10, 1fr);
    gap: 4.8rem var(--grid-gap);
}
.article-posts a {
    grid-column: span 3;
    width: 100%;
}
.article-posts a:is(:nth-of-type(6n-5), :nth-of-type(6n)) {
    grid-column: span 4;
}
.article-posts a article {
    position: relative;
}
.article-posts a.non-translated article > *:not(.tag) {
    opacity: 0.4;
}
.article-posts .image-container {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--default-border-radius);
}
.article-posts a .image-container img {
    transition: transform 0.45s var(--default-animation);
}
.article-posts a:hover .image-container img {
    transform: scale(1.035);
}
.article-posts article .tag {
    background-color: var(--clr-primary-100);
    color: var(--clr-primary-900);
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
}
.article-posts article h1 {
    margin-top: 3.2rem;
}
.article-posts article > div.flex {
    justify-content: space-between;
    margin-top: -0.4rem;
    align-items: center;
}
.article-posts article > div.flex button {
    width: 4.8rem;
}

@media only screen and (max-width: 1199px) {
    header h1 {
        grid-column: 1 / -1;
    }
    .article-posts > div > div {
        grid-column: 1 / -1;
        grid-template-columns: repeat(8, 1fr);
    }
    .article-posts a {
        grid-column: span 3;
    }
    .article-posts a:is(:nth-of-type(6n-5), :nth-of-type(6n)) {
        grid-column: span 3;
    }
    .article-posts a:is(:nth-of-type(4n-3), :nth-of-type(4n)) {
        grid-column: span 5;
    }
    .article-posts article h1 {
        margin-top: 1.6rem;
        font-size: 2.4rem;
    }
    .article-posts article > div.flex {
        margin-top: -0.8rem;
    }
    .article-posts article > div.flex h4 {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 800px) {
    .article-posts > div > div {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
        gap: 3.2rem var(--grid-gap);
    }
    .article-posts a {
        grid-column: auto !important;
    }
    .article-posts article h1 {
        margin-top: 1.6rem;
        font-size: 2.2rem;
    }
    .article-posts article > div.flex {
        margin-top: 0;
    }
    .article-posts article > div.flex p {
        font-size: 1.6rem;
    }
    .article-posts article > div.flex .arrow {
        width: 3.2rem;
    }
}