.grid-article {
    display: grid;

    article {
        display: contents;
    }

    .article-header {
        grid-area: header;
    }

    .article-content {
        grid-area: content;

        img {
            border-radius: var(--border-radius);
            display: flex;
            max-width: 400px;
            max-height: 300px;
            margin: 1.5rem 0;
            width: auto;
            height: auto;
        }
        a {
            color: var(--color-secondary);
        }
    }

    .article-aside {
        grid-area: aside;
    }

    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    grid-template-areas: 'header header''content aside';
}

@media (width < 1024px) {
    .grid-article {
        display: block;
    }
}

/* Article header */
.grid-article-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr auto;
    gap: 1rem 3rem;

    .cover-block {
        grid-area: cover;
    }

    .title-block {
        grid-area: title;
    }

    .share-block {
        grid-area: share;

        .share-block-content {
            border-top: 1px solid var(--border-color);
        }

    }

    .summary-block {
        grid-area: summary;
    }

    grid-template-areas: 'cover title''cover summary''cover share';
}

@media (width < 1280px) {
    .grid-article-header {
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem 2rem;
    }
}

@media (width < 1024px) {
    .grid-article-header {
        grid-template-columns: 1fr;
        grid-template-areas: 'title''cover''share''summary';
        grid-template-rows: auto;
        grid-gap: 0;

        .title-block {
            padding-bottom: 1.5rem;
            padding-inline: 1rem;
        }

        .share-block {
            padding-inline: 1rem;

            .share-block-content {
                border-top: 0;
                border-bottom: 1px solid var(--border-color);
            }
        }
    }

    .article-content {
        padding-inline: 1rem;
    }
}


.text-flow {
    p {
        font-size: 17px;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    ul, ol {
        margin-bottom: .5rem;
        margin-left: 0;
        padding-left: 1rem;
        margin-top: 1.5rem;
    }

    li {
        font-size: 17px;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    h2 {
        font-size: var(--nx-font-size-7);
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        text-wrap: balance;
    }

    h3 {
        font-size: var(--nx-font-size-6);
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        color: var(--color-default);
        text-wrap: balance;
    }
}

/* Featured Slider */
.glide__track {
    position: relative;
}

.arrow {
    min-width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: calc(50% - 1.5rem);
    background: rgba(255, 255, 255, 0.5);
}

.arrow span {
    font-size: 2rem;
}

.arrow.left {
    left: .5rem;
}

.arrow.right {
    right: .5rem;
}

.featured-link:hover {
    .featured-link-btn {
        background: var(--color-primary-soft);
    }
}

.featured-article-preview {
    img {
        transition: .2s ease all;
    }

    &:hover {
        img {
            transform: scale(1.05);
        }
    }
}

@media (width < 1024px) {
    .featured-overlay {
        background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7));
    }
}

/* Article preview */
.article-preview {
    container-type: inline-size;

    img {
        width: 200px;
        transition: .2s ease all;
    }

    &:hover {
        img {
            transform: scale(1.05);
        }

        .article-preview-title {
            color: var(--color-primary);
        }
    }
}

@container(width < 500px) {
    .article-preview img {
        width: 150px;
    }
}

@container (width > 500px) {
    .article-preview-title {
        font-size: var(--nx-font-size-6);
    }
}

/* Subscribe */
.subscribe {
    container-type: inline-size;

    .subscribe-container {
        padding-inline: 2rem;
    }
}

@container (width > 500px) {
    .subscribe-container {
        padding-inline: max(1rem, 5vw);
    }
}

.collection-article-preview {
    img {
        transition: .2s ease all;
    }

    &:hover {
        img {
            transform: scale(1.05);
        }

        .title {
            color: var(--color-primary);
        }
    }
}