/* ===== GLOBAL ===== */

*{
    box-sizing:border-box;
}

body{

    background:#f4f1ea;

    margin:0;

    font-family:Arial,Helvetica,sans-serif;

}


/* ===== HEADER ===== */

.comic-header{

    background:#1b1b1b;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

}


.comic-header h1{

    margin:0;

}


/* ===== MAIN FRAME ===== */

.comic-frame{

    width:95%;

    max-width:1700px;

    margin:30px auto;

    border:12px solid #2c2c2c;

    border-radius:20px;

    background:white;

    padding:25px;

}


/* ===== CONTENT ===== */

.comic-content{

    display:grid;

    grid-template-columns:70% 30%;

    gap:25px;

}


/* ===== STORY PANEL ===== */

.story-panel{

    min-height:650px;

    border:6px solid black;

    border-radius:18px;

    padding:20px;

    background:#fafafa;

}


/* ===== PRODUCT PANEL ===== */

.product-panel{

    min-height:650px;

    border:6px solid black;

    border-radius:18px;

    padding:20px;

    background:#fffdf8;

}


/* ===== FOOTER NAV ===== */

.page-nav{

    display:flex;

    justify-content:center;

    gap:120px;

    margin-top:30px;

    font-size:28px;

}


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

@media(max-width:900px){

.comic-content{

grid-template-columns:1fr;

}

.story-panel{

min-height:450px;

}

.product-panel{

min-height:300px;

}

}