.blog p{
    margin-bottom: 0;
}
section#blog-archive{
    form{
        box-shadow: none;
        & .col{
            width: calc(var(--base-width));
            max-width: calc(var(--base-width));
        }
        & input,
        & select,
        & button{
            width: calc(var(--base-width));
            /* margin-right: var(--base-sm-margin); */
            margin-bottom: var(--base-sm-margin);
            border-bottom: var(--base-border);
        }
        & select{
            border-radius: 0;
        }
        & button{
            margin-right: 0;
            border: none;
            & i{
                margin-right: var(--base-sm-margin);
                transform: scaleX(-1);
            }
        }
    }

    /* Archive List */
    & .blog-archive-list{
        margin-top: var(--base-lg-margin);
        & .article{
            width: var(--base-width);
            max-width: var(--base-width);
            box-shadow: var(--base-shadow);
            border-radius: var(--base-border-radius);
            margin-bottom: calc(var(--base-lg-margin) / 1.25);
            align-items: stretch;
            & .w65{
                width: inherit;
                max-width: inherit;
                padding: calc(var(--base-lg-padding) / 2);
                padding-right: var(--base-lg-padding);
                & .author-box{
                    margin-bottom: calc(var(--base-sm-margin) * 1.5);
                }
                & .categories-box{
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    & strong{
                        width: var(--base-width);
                        margin-bottom: var(--base-sm-margin);
                    }
                    & ul.horizontal-list{
                        width: calc(var(--base-width));
                        max-width: calc(var(--base-width));
                        row-gap: calc(var(--base-sm-margin) / 2);

                        & li{
                            margin-right: var(--base-sm-margin);
                        }
                    }
                }
                & .author-box a,
                & .categories-box a{
                    color: var(--primary-dark);
                    text-decoration: underline;
                    &:hover{
                        color: var(--primary-dark);
                    }
                }
            }
            & .w35{
                width: inherit;
                max-width: inherit;
                font-size: 0;
                & img{
                    width: var(--base-width);
                    height: var(--base-width);
                    object-fit: cover;
                    object-position: left center;
                }
            }
        }
        /* Loop Style for Search page results */
        & .grid{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            & .article{
                flex-direction: column-reverse;
                justify-content: flex-end;
                & .w65{
                    width: var(--base-width);
                    max-width: var(--base-width);
                    padding: calc(var(--base-lg-padding) / 2);
                    & h2{
                        font-size: calc(var(--base-font-size) * 1.5);
                        line-height: var(--base-line-height);
                    }
                    & .author-box{
                        margin-bottom: calc(var(--base-sm-margin) * 1.5);
                    }
                    & .categories-box{
                        justify-content:space-between;
                        align-items: flex-start;
                        & strong{
                            width: fit-content;
                            margin-right: var(--base-sm-margin);
                            margin-bottom: var(--base-sm-margin);
                        }
                        & ul{
                            width: calc(var(--base-width));
                            max-width: calc(var(--base-width));
                            margin-right: 0;
                            margin-bottom: calc(var(--base-sm-margin) * 1.5);
                            & li{
                                margin-right: var(--base-sm-margin);
                                margin-bottom: var(--base-sm-margin);
                                & a{
                                    color: var(--primary-dark);
                                    text-decoration: underline;
                                    &:hover{
                                        color: var(--primary-dark);
                                    }
                                }
                            }
                        }
                    }
                }
                & .w35{
                    width: var(--base-width);
                    max-width: var(--base-width);
                    font-size: 0;
                    & img{
                        width: var(--base-width);
                        height: 279px;
                    }
                }
            }
        }
        & .pagination{
            justify-content: center;
            flex-direction: row;
            margin-top: calc(var(--base-sm-margin) * 3);
            & .nav-links{
                justify-content: center;
                & .page-numbers{
                    margin-right: calc(var(--base-sm-margin) * 1.5);
                    font-size: calc(var(--base-font-size) * 1.35);
                    color: var(--primary-dark);
                    font-weight: var(--font-weight-regular);
                    &.current{
                        text-decoration: underline;
                        font-weight: var(--font-weight-bold);
                    }
                }
            }
        }
        & .load-more{
            justify-content: center;
        }
    }
}
@media (min-width: 375px) { }

@media (min-width: 425px) { }

/* 2. LARGE MOBILE (480px+) */
@media (min-width: 480px) { }

/* 3. TABLET (768px+) */
@media (min-width: 768px) {
    section#blog-archive {
        & .blog-archive-list {
            & .grid{
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

/* 4. DESKTOP (1024px+) */
@media (min-width: 1024px) { 
    section#blog-archive{
        form{
            & .w55 {
                width: calc(var(--base-width) / 100 * 50);
                max-width: calc(var(--base-width) / 100 * 50);
            }
            & .w25 {
                width: calc(var(--base-width) / 100 * 25);
                max-width: calc(var(--base-width) / 100 * 25);
            }
            & .w20 {
                width: calc(var(--base-width) / 100 * 25);
                max-width: calc(var(--base-width) / 100 * 25);
            }
            flex-direction: row;
            box-shadow: none;
            & input,
            & select,
            & button{
                width: calc(var(--base-width) - var(--base-sm-margin));
                margin-right: var(--base-sm-margin);
                margin-bottom: 0;
                border: none;
            }
            & select{
                border-left: var(--base-border);
                border-radius: 0;
            }
            & button{
                margin-right: 0;
                & i{
                    margin-right: var(--base-sm-margin);
                    transform: scaleX(-1);
                }
            }
        }

        /* Archive List */
        & .blog-archive-list{
            margin-top: var(--base-lg-margin);
            & .article{
                width: var(--base-width);
                max-width: var(--base-width);
                box-shadow: var(--base-shadow);
                border-radius: var(--base-border-radius);
                margin-bottom: calc(var(--base-lg-margin) / 1.25);
                align-items: stretch;
                & .w65{
                    width: calc(var(--base-width) * 65 / 100);
                    padding: calc(var(--base-lg-padding) / 2);
                    padding-right: var(--base-lg-padding);
                    & .author-box{
                        margin-bottom: calc(var(--base-sm-margin) * 1.5);
                    }
                    & .categories-box{
                        justify-content: flex-start;
                        align-items: flex-start;
                        & strong{
                            width: fit-content;
                            margin-right: var(--base-sm-margin);
                        }
                        & ul.horizontal-list{
                            width: calc(var(--base-width) - 120px);
                            max-width: calc(var(--base-width) - 120px);
                            row-gap: calc(var(--base-sm-margin) / 2);
                            & li{
                                margin-right: var(--base-sm-margin);
                            }
                        }
                    }
                    & .author-box a,
                    & .categories-box a{
                        color: var(--primary-dark);
                        text-decoration: underline;
                        &:hover{
                            color: var(--primary-dark);
                        }
                    }
                }
                & .w35{
                    width: calc(var(--base-width) * 35 / 100);
                    font-size: 0;
                    & img{
                        width: var(--base-width);
                        height: var(--base-width);
                        object-fit: cover;
                        object-position: left center;
                    }
                }
            }
            /* Loop Style for Search page results */
            & .grid{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                & .article{
                    flex-direction: column-reverse;
                    justify-content: flex-end;
                    & .w65{
                        width: var(--base-width);
                        max-width: var(--base-width);
                        padding: calc(var(--base-lg-padding) / 2);
                        & h2{
                            font-size: calc(var(--base-font-size) * 1.5);
                            line-height: var(--base-line-height);
                        }
                        & .author-box{
                            margin-bottom: calc(var(--base-sm-margin) * 1.5);
                        }
                        & .categories-box{
                            justify-content:space-between;
                            align-items: flex-start;
                            & strong{
                                width: fit-content;
                                margin-right: var(--base-sm-margin);
                                margin-bottom: var(--base-sm-margin);
                            }
                            & ul{
                                width: calc(var(--base-width));
                                max-width: calc(var(--base-width));
                                margin-right: 0;
                                margin-bottom: calc(var(--base-sm-margin) * 1.5);
                                & li{
                                    margin-right: var(--base-sm-margin);
                                    margin-bottom: var(--base-sm-margin);
                                    & a{
                                        color: var(--primary-dark);
                                        text-decoration: underline;
                                        &:hover{
                                            color: var(--primary-dark);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .w35{
                        width: var(--base-width);
                        max-width: var(--base-width);
                        font-size: 0;
                        & img{
                            width: var(--base-width);
                            height: 279px;
                        }
                    }
                }
            }
            & .pagination{
                justify-content: center;
                & .nav-links{
                    justify-content: center;
                    & .page-numbers{
                        margin-right: calc(var(--base-sm-margin) * 1.5);
                        font-size: calc(var(--base-font-size) * 1.35);
                        color: var(--primary-dark);
                        font-weight: var(--font-weight-regular);
                        &.current{
                            text-decoration: underline;
                            font-weight: var(--font-weight-bold);
                        }
                    }
                }
            }
            & .load-more{
                justify-content: center;
            }
        }
    }
}

/* 5. LARGE DESKTOP (1200px+) */
@media (min-width: 1200px) { }

/* 6. EXTRA LARGE (1440px+) */
@media (min-width: 1440px) {
    section#blog-archive{
        form{
            box-shadow: none;
            & input,
            & select,
            & button{
                width: calc(var(--base-width) - var(--base-sm-margin));
                margin-right: var(--base-sm-margin);
                margin-bottom: 0;
                border: none;
            }
            & select{
                border-left: var(--base-border);
                border-radius: 0;
            }
            & button{
                margin-right: 0;
                & i{
                    margin-right: var(--base-sm-margin);
                    transform: scaleX(-1);
                }
            }
        }

        /* Archive List */
        & .blog-archive-list{
            margin-top: var(--base-lg-margin);
            & .article{
                width: var(--base-width);
                max-width: var(--base-width);
                box-shadow: var(--base-shadow);
                border-radius: var(--base-border-radius);
                margin-bottom: calc(var(--base-lg-margin) / 1.25);
                align-items: stretch;
                & .w65{
                    padding: calc(var(--base-lg-padding) / 2);
                    padding-right: var(--base-lg-padding);
                    & .author-box{
                        margin-bottom: calc(var(--base-sm-margin) * 1.5);
                    }
                    & .categories-box{
                        justify-content: flex-start;
                        align-items: flex-start;
                        & strong{
                            width: fit-content;
                            margin-right: var(--base-sm-margin);
                        }
                        & ul.horizontal-list{
                            width: calc(var(--base-width) - 120px);
                            max-width: calc(var(--base-width) - 120px);
                            row-gap: calc(var(--base-sm-margin) / 2);
                            & li{
                                margin-right: var(--base-sm-margin);
                            }
                        }
                    }
                    & .author-box a,
                    & .categories-box a{
                        color: var(--primary-dark);
                        text-decoration: underline;
                        &:hover{
                            color: var(--primary-dark);
                        }
                    }
                }
                & .w35{
                    font-size: 0;
                    & img{
                        width: var(--base-width);
                        height: var(--base-width);
                        object-fit: cover;
                        object-position: left center;
                    }
                }
            }
            /* Loop Style for Search page results */
            & .grid{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                & .article{
                    flex-direction: column-reverse;
                    justify-content: flex-end;
                    & .w65{
                        width: var(--base-width);
                        max-width: var(--base-width);
                        padding: calc(var(--base-lg-padding) / 2);
                        & h2{
                            font-size: calc(var(--base-font-size) * 1.5);
                            line-height: var(--base-line-height);
                        }
                        & .author-box{
                            margin-bottom: calc(var(--base-sm-margin) * 1.5);
                        }
                        & .categories-box{
                            justify-content:space-between;
                            align-items: flex-start;
                            & strong{
                                width: fit-content;
                                margin-right: var(--base-sm-margin);
                                margin-bottom: var(--base-sm-margin);
                            }
                            & ul{
                                width: calc(var(--base-width));
                                max-width: calc(var(--base-width));
                                margin-right: 0;
                                margin-bottom: calc(var(--base-sm-margin) * 1.5);
                                & li{
                                    margin-right: var(--base-sm-margin);
                                    margin-bottom: var(--base-sm-margin);
                                    & a{
                                        color: var(--primary-dark);
                                        text-decoration: underline;
                                        &:hover{
                                            color: var(--primary-dark);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .w35{
                        width: var(--base-width);
                        max-width: var(--base-width);
                        font-size: 0;
                        & img{
                            width: var(--base-width);
                            height: 279px;
                        }
                    }
                }
            }
            & .pagination{
                justify-content: center;
                & .nav-links{
                    justify-content: center;
                    & .page-numbers{
                        margin-right: calc(var(--base-sm-margin) * 1.5);
                        font-size: calc(var(--base-font-size) * 1.35);
                        color: var(--primary-dark);
                        font-weight: var(--font-weight-regular);
                        &.current{
                            text-decoration: underline;
                            font-weight: var(--font-weight-bold);
                        }
                    }
                }
            }
            & .load-more{
                justify-content: center;
            }
        }
    }
}