estilos.css

:root {
    --black: #272727;
  }
  
  html {
    font-size: 14px;
    color: var(--black);
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
    background: linear-gradient(45deg, #2c1501, #532906);
  }
  
  .container {
    display: grid;
    background: #fdf8f1;
    max-width: 700px;
    margin: 0 auto;
    grid-template-areas: "header header header" "section1 section1 section1" "cooking cooking cooking" "section2 section2 section3" "footer footer footer";
    grid-gap: 5px;
    padding: 10px;
  }

  /* responsive */
  @media (max-width: 700px) {
    .container {
      grid-template-areas: "header" "section1" "cooking" "section2" "section3" "footer";
    }
  }
  .header {
    grid-area: header;
    padding: 10px;
    font-family: "UnifrakturMaguntia", cursive;
    margin: 0;
    text-align: center;
  }
  
  .header h2 {
    font-size: 60px;
    margin: 0;
    padding: 0;
  }
  
  .line {
    height: 4px;
    margin: 2px 0;
    background: #222;
    width: 100%;
  }
  
  .line2 {
    height: 2px;
    margin: 2px 0;
    background: #222;
    width: 100%;
  }
  
  .section1 {
    grid-area: section1;
    display: grid;
    padding: 0 20px;
    grid-template-areas: "headline headline headline" "img1 img1 p3" "img1 img1 p4" "p1 p2 p5";
    min-height: 400px;
  }
  
  .headline {
    grid-area: headline;
    font-size: 80px;
    text-transform: uppercase;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    padding: 0 0 15px;
    margin: 0;
  }
  
   /* responsive */
   
  @media (max-width: 700px) {
    .section1 {
      grid-template-areas: "headline headline" "img1 img1" "p1 p4" "p2 p5" "p3 .";
    }
  }
  @media (max-width: 500px) {
    .section1 {
      grid-template-areas: "headline" "img1" "p1" "p2" "p3" "p4" "p5";
    }
  
    .headline {
      font-size: 50px;
    }
  }
  .img1 {
    grid-area: img1;
    width: 100%;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
  
  p {
    margin: 0;
    padding: 2px 5px;
    font-family: "Merriweather", serif;
    text-indent: 10px;
  }
  
  .p1 {
    grid-area: p1;
    min-height: 100px;
    text-align: justify;
  }
  
  .p1 span {
    font-size: 20px;
  }
  
  .p2 {
    grid-area: p2;
    min-height: 100px;
    text-align: justify;
  }
  
  .p3 {
    grid-area: p3;
    min-height: 100px;
    text-align: justify;
  }
  
  .p4 {
    grid-area: p4;
    min-height: 100px;
    text-align: justify;
  }
  
  .p5 {
    grid-area: p5;
    min-height: 100px;
    text-align: justify;
  }
  
  .cooking {
    grid-area: cooking;
    color: white;
    background: #222;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    padding: 5px;
    margin: 0 20px;
  }
  
  .section2 {
    grid-area: section2;
    margin: 0 20px;
    position: relative;
  }
  
  .section2 img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    min-width: 250px;
  }
  
  .section2 div {
    width: 100%;
    background: #444;
    color: white;
    position: absolute;
    bottom: 0;
    font-size: 18px;
    padding: 10px 0px;
    text-align: center;
  }
  
  .section3 {
    grid-area: section3;
    font-size: 18px;
    margin: 0 20px;
    font-family: "Merriweather", serif;
    border: 4px solid #222;
  }
  
  .section3 > div {
    margin: 2px;
    border: 2px solid #222;
    height: 98%;
  }
  
  .section3 h3 {
    text-align: center;
    text-transform: uppercase;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 900;
    margin: 10px;
    font-size: 24px;
  }
  
  .weather-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
    padding: 10px 5px;
  }
  
  .weather-container > div {
    min-width: 200px;
    display: flex;
  }
  
  .icon-container {
    width: 30px;
    text-align: center;
  }
  
  .temp {
    width: 60px;
    text-align: right;
    padding-right: 15px;
  }
  
  .location {
    min-width: 140px;
    text-align: left;
  }
  
  .footer {
    grid-area: footer;
    min-height: 100px;
    padding: 5px;
    font-family: "Merriweather", serif;
    background: #222;
    margin: 0 20px;
    border-radius: 2px;
  }
  
  .footer h2 {
    text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    margin: 5px;
    text-transform: uppercase;
    color: white;
  }
  
  .local-list {
    display: flex;
    list-style-type: none;
    width: 100%;
    flex-wrap: wrap;
    grid-gap: 10px;
    margin: 0;
    padding: 0;
    justify-content: space-between;
  }
  
  .local-list li {
    padding: 10px 5px;
    background: white;
    border-radius: 2px;
    text-align: center;
    color: #222;
    min-width: 120px;
    margin: 5px auto;
    font-size: 14px;
  }
  
  .local-list li span {
    background: #222;
    padding: 6px 4px;
    border-radius: 50%;
    color: white;
  }