/* ==========================================================================
   AI Narratives
   Responsive Design
   Version: 1.0

   Developed by
   Zytrix Core Systems Enterprise
   ========================================================================== */

/* ==========================================================================
   LARGE DESKTOPS
   ========================================================================== */

@media (min-width:1440px){

.container{

max-width:1400px;

}

.hero h1{

font-size:64px;

}

}

/* ==========================================================================
   DESKTOPS
   ========================================================================== */

@media (max-width:1200px){

.container{

width:94%;

}

.grid-4{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(2,1fr);

}

}

/* ==========================================================================
   TABLETS
   ========================================================================== */

@media (max-width:992px){

.hero{

padding:80px 20px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:18px;

}

.article-layout,
.paper-layout,
.video-layout,
.product-layout,
.podcast-layout{

grid-template-columns:1fr;

}

.article-sidebar,
.paper-sidebar{

position:relative;

top:auto;

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

gap:30px;

}

}

/* ==========================================================================
   SMALL TABLETS
   ========================================================================== */

@media (max-width:768px){

.container{

width:95%;

}

section{

padding:60px 0;

}

.grid,
.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.flex-between{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.navbar .container{

height:70px;

}

.nav-menu{

display:none;

}

.logo{

font-size:22px;

}

.hero{

padding:70px 20px;

min-height:auto;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.article-title{

font-size:38px;

}

.article-subtitle{

font-size:20px;

}

.article-content p{

font-size:17px;

line-height:1.8;

}

.newsletter{

padding:40px 25px;

}

.footer-grid{

grid-template-columns:1fr;

}

.author-box{

flex-direction:column;

text-align:center;

}

}

/* ==========================================================================
   MOBILE DEVICES
   ========================================================================== */

@media (max-width:576px){

.container{

width:94%;

}

.hero{

padding:60px 15px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

h1{

font-size:34px;

}

h2{

font-size:28px;

}

h3{

font-size:22px;

}

.btn{

width:100%;

padding:15px;

}

.card{

padding:22px;

}

.article-title{

font-size:30px;

}

.article-subtitle{

font-size:18px;

}

.article-content p{

font-size:16px;

}

.article-meta{

flex-direction:column;

gap:8px;

}

.search-box{

flex-direction:column;

}

.search-box button{

width:100%;

}

.pagination{

flex-wrap:wrap;

}

.newsletter{

padding:30px 20px;

}

.newsletter h2{

font-size:26px;

}

.footer{

padding:50px 0;

}

}

/* ==========================================================================
   EXTRA SMALL DEVICES
   ========================================================================== */

@media (max-width:400px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.logo{

font-size:20px;

}

.card{

padding:18px;

}

.btn{

font-size:15px;

}

}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

.navbar,
.footer,
.newsletter,
.pagination,
.search-box,
button{

display:none !important;

}

body{

background:#fff;

color:#000;

}

.container{

width:100%;

max-width:100%;

}

.article-content{

max-width:100%;

}

a{

color:#000;

text-decoration:none;

}

}

/* ==========================================================================
   END
   ========================================================================== */