/* Variables */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root {
  --White: hsl(0, 0%, 100%);
  --Slate300: hsl(212, 45%, 89%);
  --Slate500: hsl(216, 15%, 48%);
  --Slate900: hsl(218, 44%, 22%);
  --Font: "Outfit", sans-serif;
}

/*  */
body {
  height: 100vh;
  background: var(--Slate300);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--Font);
  main {
    .container {
      .card {
        background: var(--White);
        padding: 15px;
        width: 300px;
        margin-bottom: 30px;
        border-radius: 10px;
        .card-img {
          img {
            max-width: 100%;
            border-radius: 10px;
          }
        }
        .card-content {
          padding: 10px;
          text-align: center;
          h2 {
            color: var(--Slate900);
            font-weight: 700;
          }
          p {
            font-weight: 400;
            color: var(--Slate500);
          }
        }
      }

      .attribution {
        font-size: 11px;
        text-align: center;
        a {
          color: hsl(228, 45%, 44%);
        }
      }
    }
  }
}