/* ===================================================================
                CONTENT
=================================================================== */

.wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    min-height: 100vh;
}

    .wrapper .blog-list {
        padding: 60px;
    }

        .wrapper .blog-list .blog-post {
            max-width: 1500px;
            margin-bottom: 50px;
        }

        .wrapper .blog-list .post-header {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 20px;
        }

            .wrapper .blog-list .post-header img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .wrapper .blog-list .post-tag {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background-color: var(--main-darkgray);
            color: white;
            padding: 5px 12px;
            font-size: 0.8rem;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 4px;
        }

        .wrapper .blog-list .blog-post h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #2f3542;
        }

        .wrapper .blog-list .post-excerpt {
            margin-bottom: 20px;
            color: #57606f;
        }

        .wrapper .blog-list .btn-read-more {
            display: inline-block;
            background-color: #2f3542;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

            .wrapper .blog-list .btn-read-more:hover {
                background-color: #57606f;
            }

        .wrapper .blog-list hr, .wrapper .blog-content hr {
            border: 0;
            height: 1px;
            background: #dfe4ea;
            margin: 25px 0 10px 0;
        }

        .wrapper .blog-list .post-date {
            font-size: 0.85rem;
            color: #a4b0be;
            font-style: italic;
            text-align: end;
        }

    .wrapper .sidebar {
        background-color: #333;
        color: #fff;
        padding: 20px;
    }

        .wrapper .sidebar h2 {
            color: var(--main-white);
            font-size: 1.5rem;
            padding-top: 10px;
        }

        .wrapper .sidebar a {
            color: var(--main-white);
            font-size: 1rem;
            line-height: 1.5rem;
            padding-left: 20px;
        }

            .wrapper .sidebar a span {
                vertical-align: top;
                font-weight: 300;
            }

    .wrapper .blog-content {
        padding: 60px;
    }

        .wrapper .blog-content small {
            padding: 50px 0 50px 0;
            font-weight: 300;
            line-height: 4rem;
            font-size: 1rem;
            line-height: 1.5rem;
        }

        .wrapper .blog-content h1 {
            padding: 50px 0 50px 0;
            font-weight: 300;
            line-height: 4rem;
            font-size: 3rem;
            line-height: 3.5rem;
        }

        .wrapper .blog-content h2 {
            font-size: 2rem;
            line-height: 2.2rem;
            font-weight: 300;
            padding-bottom: 30px;
            padding-top:60px;
            padding-left:30px
        }

        .wrapper .blog-content p {
            font-size: 1rem;
            line-height: 1.4rem;
            font-weight: 300;
            padding-bottom: 10px;
            padding-left:60px;
        }

        .wrapper .blog-content li {
            padding-left:20px;
            font-style:italic;
        }

        .wrapper .blog-content figure {
            text-align:center;
            padding:30px;
        }

    @media (max-width: 768px) {
        .wrapper {
        grid-template-columns: 1fr;
    }

        .wrapper .sidebar {
            display: none;
        }

        .wrapper .blog-list {
            padding: 20px;
        }
}