/* =========================================
   ECONOME DESIGN SYSTEM
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{

    --primary:#041E42;
    --secondary:#1E293B;

    --gold:#D4AF37;
    --gold-dark:#B89028;

    --background:#F8F5F0;
    --white:#FFFFFF;

    --text:#1E293B;
    --text-light:#64748B;

    --border:#E5E7EB;

    --success:#16A34A;
    --danger:#DC2626;

    --shadow:0 10px 25px rgba(0,0,0,.08);

    --radius:16px;

}

/* ========================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Inter',sans-serif;

    line-height:1.7;

}

/* ========================================= */

h1,h2,h3,h4,h5{

    font-family:'Playfair Display',serif;

    color:var(--primary);

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

button{

    cursor:pointer;

    border:none;

    font-family:inherit;

}
.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

h1 {
    max-width: 800px;
    margin: 40px auto;
    font-size: 42px;
    font-weight: 700;
}

.articles{

    max-width:1000px;
    width:92%;
    margin:auto;

}

.article-card {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid #d6d6d6;
}

.article-card img{

    width:220px;
    height:150px;

    object-fit:cover;

    flex-shrink:0;

}

.article-card h2 {
    font-size: 28px;
    margin: 0 0 10px;
    line-height: 1.2;
}

.article-card p {
    font-family: Arial, sans-serif;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 15px;
}

.article-card a {
    font-family: Arial, sans-serif;
    color: #000;
    font-size: 15px;
    text-decoration: none;
    font-weight: bold;
}

.article-card a:hover {
    text-decoration: underline;
}


/* Mobile */
@media(max-width:700px) {

    h1 {
        font-size: 34px;
        padding: 0 20px;
    }

    .articles {
        padding: 0 20px;
    }

    .article-card {
        flex-direction: column;
    }

    .article-card img {
        width: 100%;
        height: 200px;
        order: 0;
    }

    .article-card h2 {
        font-size: 24px;
    }
    .article-card{

    padding:30px 0;
    
}
.article-card a{

    display:inline-block;

    padding:10px 0;

}
.article-card{

    transition:.25s;

}

.article-card:hover{

    transform:translateY(-4px);

}
}