html, body {
    height: 100%;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f2f2f2;
    color:#222;
    display: flex;
    flex-direction: column;
}

main.layout {
    flex: 1;
}

/* HEADER */

header{
    background:linear-gradient(90deg,#0e1a2b,#1b355c);
    color:white;
    text-align:center;
    padding:25px 10px;
}

header h1{
    margin:0;
    font-size:32px;
}

.subtitle{
    color:#ffd34d;
    margin-top:5px;
    font-style:italic;
}

nav{
    margin-top:10px;
}

nav a{
    color:white;
    text-decoration:none;
    margin:0 12px;
    font-size:14px;
}

/* LAYOUT */

.layout{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:30px;
    padding:30px;
    max-width:1200px;
    margin:auto;
}

/* ARTICLE */

.article h2{
    border-left:4px solid red;
    padding-left:10px;
}

.main-image{
    width:100%;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.caption{
    text-align:center;
    font-style:italic;
    color:#555;
}

.article p{
    line-height:1.6;
}

/* TABLE */

table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
    background:white;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

thead{
    background:#e21b2d;
    color:white;
}

th,td{
    padding:10px;
    text-align:left;
    border-bottom:1px solid #ddd;
    font-size:14px;
}

/* SIDEBAR */

.sidebar h3{
    margin-top:0;
}

.card{
    background:white;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    margin-bottom:20px;
    overflow:hidden;
}

.card img{
    width:100%;
    display:block;
}

.card h4{
    color:red;
    margin:10px;
}

.card p{
    margin:0 10px 12px 10px;
    font-size:14px;
}

/* FOOTER */

footer{
    background:#0e1a2b;
    color:white;
    text-align:center;
    padding:15px;
    margin-top:20px;
    font-size:14px;
}

/* RESPONSIVE */

@media (max-width:900px){
    
    .layout{
        grid-template-columns:1fr;
    }
    
    .sidebar{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:15px;
    }
    
    .card{
        margin:0;
    }
    
}

@media (max-width:600px){
    
    .sidebar{
        grid-template-columns:1fr;
    }
    
    header h1{
        font-size:24px;
    }
    
}