main {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .page-title { font-size: 1.6rem; text-decoration: underline }

    .articles-section {
        display: flex;
        flex-direction: column;
        gap: 70px;
    }

    .article {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 20px;

        &:after {
            content: "";
            position: absolute;
            bottom: -5px;
            width: 100%;
            bottom: -3px;
            border-bottom: 3px dashed var(--secondary);
        }
    }

    .article {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        .article-date { opacity: .2; font-family: var(--code-font) }

        .tags-container {
            display: flex;
            align-items: center;
            gap: 10px;

            li a { font-family: var(--code-font); color: var(--active-color) }
        }

        .read-more-button {
            font-size: .9rem;
            color: var(--active-color);
            position: relative;
            width: fit-content;

            &:after {
                content: "";
                position: absolute;
                width: 10%;
                transition: width .5s ease-out;
                height: 1px;
                background: var(--active-color);
                left: 0;
                bottom: 0;
            }

            &:hover {
                &:after {
                    width: 80%;
                }
            }
        }
    }
}