main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

main .content {
    display: flex;
    padding: 50px 0;
    width: 1200px;
    max-width: 90%;
    gap: 30px;
    align-items: start;

    @media screen and (max-width: 1024px) {
        flex-direction: column-reverse;
    }
}

main .content .posts {
    flex: 2 0 0;
    display: flex;
    flex-direction: column;
    gap: 40px;

    .post {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-decoration: none;

        .post-thumbnail-date {
            position: relative;

            .post-thumbnail {
                width: 100%;
                aspect-ratio: 16/9;
                object-fit: cover;
                border-radius: 6px;
            }

            .post-date {
                position: absolute;
                top: 20px;
                right: 20px;
                background-color: var(--olive-ultra-light);
                padding: 20px;
                border-radius: 6px;
                
                text-align: center;
                text-transform: uppercase;
                font-family: Poppins;
                font-size: 12px;
                color: var(--olive);

                /* Makes date appear on 2 lines */
                display: block;
                box-sizing: border-box;
                max-width: calc(2em + 40px);
                overflow: 0;
            }
        }

        .post-author-title-excerpt {
            display: flex;
            flex-direction: column;
            gap: 5px;

            .post-author {
                font-size: 13px;
                color: var(--coffee);
                gap: 4px;

                svg {
                    height: 13px;
                    fill: var(--coffee);
                }
            }

            .post-title {
                font-size: 32px;
                font-family: Castoro;
                color: var(--olive)
            }
        }

        .post-excerpt {
            font-size: var(--body);
            font-family: Poppins;
            font-size: 15px;
            line-height: 26px;
            color: #736b6d;
        }

        .post-read-more {
            padding: 10px 20px;
            background-color: var(--latte);
            border-radius: 1000px;
            width: fit-content;

            color: var(--olive);
            font-size: 13px;
            font-family: Poppins;
        }
    }

    .posts-paginator {
        display: flex;
        gap: 10px;
        align-items: center;

        * {
            font-family: Poppins;
            font-size: var(--small);
            color: var(--coffee);
            text-decoration: none;
        }

        .next, .prev, .current {
            padding: 10px;
            border-radius: 1000px;
            background-color: var(--latte);
        }
    }
}

main .content aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 0 0;

    .aside-item {
        flex: 1 0 0;
        background-color: #f6f5ec;
        padding: 30px;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        h3 {
            font-size: 22px;
            font-family: Castoro;
            color: var(--olive);
        }
    }

    .search {
        form, form * {
            all: unset;
        }
        form {
            display: flex;
            gap: 10px;
            align-items: stretch;
        }
        form input[type=text], form button {
            border: 1px solid #dad5d2;
            border-radius: 6px;
            background-color: #FFFFFF;

            font-family: Lexend;
            color: #736b6b;
            font-size: var(--small);
        }
        form input[type=text] {
            padding: 20px;
            display: block;
            flex: 1 0 0;
        }
        form button {
            padding: 0 20px;
            cursor: pointer;

            svg {
                height: var(--h5);
                fill: #736b6b;
            }
        }
    }

    .categories {
        ul {
            all: unset;
            display: flex;
            flex-direction: column;
            gap: 10px;
    
            li {
                all: unset;

            }
            .selected {
                border-radius: 6px;
                background-color: #ffffff;

                .active-indicator {
                    background-color: var(--olive);
                }
            }
            a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 20px;

                font-family: Poppins;
                color: var(--coffee);
                font-size: var(--body);
                text-decoration: none;

                .active-indicator {
                    width: 10px;
                    height: 10px;
                    background-color: transparent;
                    border: 1px solid var(--olive);
                    border-radius: 1000px;
                }
            }
            .clear-filters {
                margin-top: 10px;
                align-self: flex-end;
                border-radius: 6px;
                color: #ffffff;
                background-color: var(--coffee);
                border-radius: 1000px;
            }
        }

    }

    @media screen and (max-width: 1024px) {
        width: 100%;
        
        .latest-posts-container {
            display: none;
        }
    }
}