@media (max-width: 1024px) { .mobile-menu-toggle {
display: block;
}
.topbar-content {
display: flex;
justify-content: space-between;
align-items: center;
} .site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.site-logo a {
font-size: 1.5rem;
}
.site-logo img {
max-height: 35px;
} .topbar-social {
display: none;
} .main-nav {
display: none;
} .news-ticker {
display: none;
} .mobile-menu {
display: block;
} .hero-slider {
display: block;
} .home-layout {
display: block !important;
grid-template-columns: 1fr !important;
}
.home-sidebar-left,
.home-sidebar-right {
width: 100%;
margin-bottom: 2rem;
}
.home-main {
width: 100%;
} .articles-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem;
} .category-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
} .footer-columns {
grid-template-columns: 1fr !important;
gap: 2rem;
text-align: center;
}
.footer-column {
text-align: center;
}
.footer-title {
text-align: center;
}
.footer-links {
display: flex;
flex-direction: column;
align-items: center;
} .category-hero-image {
height: 250px;
}
.category-list-item {
grid-template-columns: 1fr !important;
}
.category-list-image {
width: 100%;
height: 200px;
} .article-header-image {
height: 250px;
}
.article-content {
padding: 1rem;
}
.article-content h2 {
font-size: 1.5rem;
}
} @media (min-width: 768px) {
.mobile-menu-toggle {
display: none;
}
.mobile-menu {
display: none;
}
.mobile-menu-overlay {
display: none;
}
.hero-slider {
display: none;
}
} @media (min-width: 768px) and (max-width: 1024px) {
.container {
max-width: 100%;
padding: 0 2rem;
}
.home-layout {
grid-template-columns: 1fr;
}
.home-sidebar-left,
.home-sidebar-right {
display: none;
}
.articles-grid {
grid-template-columns: repeat(2, 1fr);
}
.category-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.footer-columns {
grid-template-columns: repeat(3, 1fr);
}
} body.dark-mode .mobile-menu {
background-color: #0a0a0a;
}
body.dark-mode .mobile-menu-items a {
color: #f5f5f5;
}