@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,400;1,400&display=swap');
:root {
    --LineThickness: 0.5vw;
    font-family: 'Roboto';
}
html body {
    align-items: center;
    justify-items: center;
}
.news {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% auto 5%;
    width: 90%;
    margin-bottom: 30px;
    aspect-ratio: 210/297;
    padding: 10px;
    background-color: #EEE;
    background-color: #ebe0cf;
    /*background-image: url("bg.png");
    background-position: center center;
    background-size: cover;*/
}
.news-head {
    justify-self: center;
    border-bottom: var(--LineThickness) solid black;
    font-family: 'Roboto';
    font-size: 10vw;
}
.news-body {height: 100%;}
.news-body > .article {
    display: grid;
    grid-template-areas: "article-1--h article-1--h"
                         "article-1--1 article-1--2"
                         "article-1--3 article-1--3";
    grid-template-columns: 50% 50%;
}


.article {
    display: flex;
    width: 90%;
    justify-self: center;
    align-items: center;
    justify-content: center;
}
.article-head {
    margin: 10px;
    justify-self: center;
    font-family: 'Roboto';
    font-size: 4.5vw;
    font-weight: 500;
}
.article-body {
    margin: 0px;
    margin-right: 2vw;
    align-self: baseline;
    font-family: 'Lora';
    font-size: 3vw;
    font-display: block;
}
.article-body2 {margin: 0px; margin-left: 2vw;}
.article-img {
    width: 100%;
    border: 0.5vw solid black;
    border-radius: 3vw;
}
#article-1--h {grid-area: article-1--h;}
#article-1--1 {grid-area: article-1--1;}
#article-1--2 {grid-area: article-1--2;}
#article-1--3 {grid-area: article-1--3;}

.news-footer {
    padding-top: 1vw;
    border-top: var(--LineThickness) solid black;
    font-size: 2vw;
}