nav.main{
    width: calc(100% - ( 2 * var(--page-side-padding) ));
    max-width: 100%;
    height: var(--main-menu-heigth);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--main-menu-top-padding) var(--page-side-padding);
    background-color: var(--pallete-secondary-color);
    font-size: var(--main-menu-font-size);
    column-gap: 12px;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

nav.recent{
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    row-gap: 36px;

    .item{
        width: inherit;
        max-width: inherit;
        display: flex;
        flex-direction: row;
        column-gap: 12px;

        .thumb{
            width: 240px;
            height: 128px;
            object-fit: cover;
        }

        .details{
            display: flex;
            flex-direction: column;
            row-gap: 6px;
            justify-content: space-between;
            flex: 1 1 0;
            
            .meta{
                width: 100%;

                .title{
                    margin: 0px;
                }

                .excerpt{
                    margin: 0px;
                }
            }

            .href{
                width: 100%;
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 720px) {
    
}

@media screen and (max-width: 540px) {
    nav.recent{
        .item{
            flex-direction: column;

            .thumb{
                width: 100%;
                height: auto;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    
}

@media screen and (max-width: 400px) {
    
}

@media screen and (max-width: 360px) {

}