* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

body {
    background-color: rgba(255, 255, 255, 0.3);
}

h2 {
    margin-bottom: 1.2rem;
}

h3 {
    margin-bottom: 0.8rem;
}

h2, 
h3 {
    font-family: "Josefin Sans";
}

article {
    line-height: 1.4rem;
}

p {
    font-family: "Work Sans";
}

.newspaper-layout {
  display: grid;
  grid-template-areas: 
  'title title title'
  'feature-article feature-article cover-image'
  'secondary-article secondary-article cover-image'
  'small-article1 small-article2 small-article3';
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr;
  gap: 35px;
  padding: 1rem;
}

.title {
  grid-area: title;
  font-family: "Caprasimo";
  background-color: rgb(202, 202, 202);
  padding: 1rem;
  text-align: center;
  margin: -1rem;
  margin-bottom: 0;
}

.feature-article {
  grid-area: feature-article;
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.cover-image {
  grid-area: cover-image;
}

.cover-image img {
  max-width: 100%;
}

.secondary-article {
  grid-area: secondary-article;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.small-article1 {
  grid-area: small-article1;
}

.small-article2 {
  grid-area: small-article2;
}

.small-article3 {
  grid-area: small-article3;
}

.small-article1,
.small-article2,
.small-article3 {
    background-color: rgba(177, 177, 177, 0.5);
    padding: 1.5rem 1.2rem;
}