*, *::after, *::before {
    box-sizing: border-box;
  }

  :root {
    font: 1.2em/1.4 Arial, Helvetica, sans-serif;
  }

  body {
    /* padding: 0 0 1em; */
    padding: 0;
    margin: 0;
  }
  .container{
    max-width: 74rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  header {
    background-color: #333;
    color: #fff;
    border: 5px solid #000;
  

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 0.5em 1em;
      border-top: 1px solid #fff;
    }

    .title {
      font-size: 150%;
      font-style: italic;
      font-weight: bold;
      padding-block: 1em;
    }
  }
  main {
    padding: 0 1em;
  }

  .cards {
      list-style: none;
      margin: 0;
      padding: 0;   

    li {
      border: 5px solid #000;
      margin-bottom: 1em;
    }

    h2 {
      background-color: #333;
      color: #fff;
      margin: 0;
      padding: 0.5em 1em;
    }

    .inner {
      padding: 0.5em 1em;
    }
  }
  .sidebar {
    background-color: #333;
    border: 5px solid #000;
    padding: 0.5em 1em;
    color: #fff;
  }  

  @media (min-width: 40em) {
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    nav{ 
      ul {
        display: flex;

      }

      a {
        border: 0;
      }
    }
    main {
      display: flex;
      flex-wrap: wrap;
      padding-inline-start: 1rem;
      gap: 1rem;

      article {
        flex: 1 1 48rem;

      }

      aside {
        flex: 1 0 16rem;
      }
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      li {
        flex: 0 1 17rem;
      }
    }
  }
  @media (min-width: 80em) {
    main {
      margin-top: 1rem;
      display: flex;
      gap: 1rem;
    
      article {
        flex-shrink: 1;
      }
    
      aside {
        min-width: 20rem;
      }
    }
    
    .cards {
      li {
        flex: 0 1 30%;
      }
    }
  }