.container {
  width: 100%;
  background-color: var(--background);

  .main {
    background-color: var(--background);
    max-width: 1100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4em;

    h2 {
      color: var(--primary);
      margin-left: 1em;
      padding-top: 1em;
      font-size: 3rem;
    }

    ul {
      padding: 1em;
      list-style: none;
      display: grid;

      li {
        box-shadow: 0px 9px 27px -10px rgba(0, 0, 0, 0.41);
        margin: 1em;
        img {
          width: 100%;
        }

        .content {
          padding: 2em;
          h3 {
            color: var(--primary);
            cursor: pointer;
          }

          h3:hover {
            text-decoration: underline;
          }

          p {
            color: var(--text);
          }
        }
      }
    }
  }

  @media (min-width: 600px) {
    ul {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    ul {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
