/* -- Responsive CSS -- */

@media all and (max-width: 650px) {
    /* Singles Page */
        .single-content {
            padding: clamp(15px, 3%, 20px) 0;
        }
        .single-header .container-image {
            aspect-ratio: 6 / 4;
        }
    /* Blog List/Grid */
        ul.list-blog.grid {
            flex-direction: column;
            align-items: center;
        }
        ul.list-blog.grid li {
            width: 100%;
            gap: 18px;
        }
        ul.list-blog.grid li .container-image {
            aspect-ratio: 16 / 9;
        }
        ul.list-blog.grid li .container-text {
	        padding: 0 25px;    
            gap: 12px;
        }
}

@media all and (max-width: 450px) {
    /* Site Header */
        header#site-header {
            padding-top: 25px;
            gap: 28px;
        }
    /* Site Main Nav */
        nav#site-main-nav ul#menu-main-menu {
            gap: 15px;
        }
        nav#site-main-nav ul#menu-main-menu li {
            padding: 5px 12px;
        }
    /* Categories Nav */
        nav.nav-categories h3 {
            margin-bottom: 20px;
        }
        nav.nav-categories ul {
            gap: 12px;
        }
        nav.nav-categories ul li {
            padding: 5px 10px;
        }
        nav.nav-categories ul li a::before {
            width: 30px;
        }
    /* Blog List/Grid */
        ul.list-blog {
            gap: 35px;
        }
        ul.list-blog li {
            gap: 15px;
        }
        ul.list-blog li .container-text {
            padding: 0;
        }
        ul.list-blog.grid li .container-text {
	        padding: 0;
        }
    /* Singles Page */
        .single-content blockquote {
            padding-left: 15px;
        }
    /* List - Comments */
    ol.list-comments ol.children {
        margin-left: 25px;
    }
}