.page-title {
    display: none;
}

.content {
    margin-top: 77px;
    padding: 0;
}
    .article-list {
        margin-top: 1em;
    }

        .article-list a {
            color: black;
            text-decoration: none;
        }

        .article-list .article:hover a {
            color: #156B13;
            text-decoration: none;
        }

        .article-list:hover h3 {
            color: green;
        }

        .article-list .article {
            display: grid;
            grid-template-columns: 1fr auto;
            padding: 1em;
            /*padding: 2em;*/
            border-top: 1px solid #e2e2e2;
        }

            .article-list .article .article-text {
                padding-right: 1em;
            }

                .article-list .article .article-text p {
                    margin-bottom: 0;
                    line-height: 1em;
                    color: gray;
                }

                    .article-list .article .article-text p a {
                        color: #156B13;
                        text-decoration: underline;
                        margin-left: 5px;
                    }

                .article-list .article .article-text h3 {
                    font-size: 1.2em;
                    line-height: 1em;
                    /*font-size: 1.8em;*/
                }

                .article-list .article .article-text .last-modification {
                    color: gray;
                    font-size: 0.8em;
                }

            .article-list .article .article-image {
                min-height: 8em;
                min-width: 8em;
                /*min-height: 20vh;*/
                /*min-width: 10vw;*/
            }

                .article-list .article .article-image .article-image-link {
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-repeat: no-repeat;
                    background-size: contain;
                    transition: color 0.2s ease;
                }

            /*.article-list .article:hover .article-image .article-image-link {
                background-size: 101%;
            }*/

    .gray-background {
        background-color: rgba(0, 0, 0, .05);
    }

    .article-list-page {
        font-size: 1.5em;
        margin-left: 1em;
        color: gray;
    }

    .pagination {
        flex-direction: row-reverse;
        border-top: 1px solid #e2e2e2;
        padding-top: 1em;
        border-radius: 0;
        gap: 5px;
    }
.main-article {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
    text-align: left;
    transition: color 0.2s ease;
    background-color: rgba(0, 0, 0, 0.15);
    background-blend-mode: multiply;
}

    .main-article:hover {
        filter: brightness(1);
        background-color: transparent;
    }

    .main-article a {
        color: white;
        text-decoration: none;
        transition: color 0.2s ease;
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        padding: 2em;
        padding-right: 30%;
        padding-left: 1em;
    }

    .main-article .article-title {
        width: 100%;
        height: 100%;
    }

        .main-article .article-title h1 {
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            font-size: 2em;
            /*font-size: 2.8em;*/
        }

.secondary-article {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 20vh;
    transition: color 0.2s ease;
    background-color: rgba(0, 0, 0, 0.15);
    background-blend-mode: multiply;
}

    .secondary-article .article-title {
        width: 100%;
        height: 100%;
    }

    .secondary-article a {
        color: white;
        text-decoration: none;
        transition: color 0.2s ease;
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        padding: 1em;
    }

    .secondary-article:hover {
        filter: brightness(1);
        background-color: transparent;
    }

    .secondary-article .article-title h2 {
        font-size: 1.5em;
        line-height: 1em;
        font-weight: 600;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }


    @media (max-width: 500px) {
        .content {
            margin-top: 55px;
        }
    }



    @media (min-width: 576px) {
        .blog-container .container {
            max-width: 100%;
        }

        .secondary-article .article-title h2 {
            font-size: 1.2em;
        }

        .main-article .article-title h1 {
            font-size: 2.5em;
        }
    }

    @media (min-width: 768px) {
        .blog-container .container {
            max-width: 100%;
        }

        .secondary-article .article-title h2 {
            font-size: 1.5em;
        }
    }

    @media (min-width: 992px) {
        .blog-container .container {
            max-width: 960px;
        }
    }

    @media (min-width: 1200px) {
        .blog-container .container {
            max-width: 1140px;
        }
    }