:root {
      --White: hsl(0, 0%, 100%);

      --Slate-300: hsl(212, 45%, 89%);
      --Slate-500: hsl(216, 15%, 48%);
      --Slate-900: hsl(218, 44%, 22%);
      
      --Indigo-500: hsl(228, 45%, 44%);
    }

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

    html, body {
      height: 100vh;
    }

    body {
      font-family: 'Outfit', sans-serif;
    }

    .container {
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--Slate-300);
      padding: 20px;
    }

    .card {
      width: 320px;
      min-width: 200px;
      height: 499px;
      box-shadow: 0px 0px 5px 0px var(--Slate-300);
      background-color: var(--White);
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-radius: 20px;
      text-align: center;
    }

    img {
      max-width: 350px;
      border-radius: 10px;
      margin-bottom: 24px;
    }

    .content {
      display: flex;
      flex-direction: column;
      padding: 0 10px;
    }

    .title {
      font-weight: 700;
      font-size: 22px;
      line-height: 120%;
      letter-spacing: 0px;
      color: var(--Slate-900);
      margin-bottom: 20px;
    }

    .description {
      font-weight: 400;
      font-size: 15px;
      line-height: 140%;
      letter-spacing: 0.2px;
      color: var(--Slate-500);
      margin-bottom: 40px;
    }

    .attribution { 
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      
    }
    .attribution a { 
      color: var(--Indigo-500); 
    }

    .attribution p {
      font-size: clamp(0.6rem, 2vw, 0.8rem);
    }