html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        background: hsla(255, 88%, 90%, 0.295);
        font-family: "DM Sans", sans-serif;
        color: hsl(0, 0%, 7%);
      }
      h1 {
        margin: 0;
        font-size: clamp(1rem, 22vw, 4rem);
      }
      h2 {
        font-size: clamp(1rem, 15vw, 2rem);
        margin: 0;
        line-height: 0.9;
      }
      .num {
        font-size: clamp(1rem, 20vw, 3rem);
      }
      h3 {
        font-size: clamp(1rem, 10vw, 2rem);
      }
      .grid {
        max-width: 1000px;
        margin: 100px auto 0;
        display: grid;
        grid-template-columns: 220px minmax(780px, 1fr);
        grid-template-rows: auto auto auto;
        gap: 30px;
      }

      .grid1Inner1 {
        display: grid;
        gap: 30px;
      }
      .grid1Inner2 {
        display: grid;
        grid-template-rows: minmax(300px, 1fr) auto;
        gap: 30px;
      }
      .gridTop {
        display: grid;
        grid-template-columns: minmax(500px, 1fr) 1fr;
        gap: 30px;
      }
      .gridUpper {
        display: grid;
        grid-template-rows: minmax(100px, 1fr) 200px;
        gap: 30px;
      }
      .grid1Inner2 > section:first-child {
        padding: 32px;
        text-align: center;
      }

      .gridTop section:nth-child(2) {
        background-color: hsl(254, 88%, 90%);
        padding: 9px 0 0 4px;
      }
      
      .grid1Inner1 section:nth-child(1) {
        background: hsl(31, 66%, 93%);
      }
      .grid1Inner1 section:nth-child(1) span {
        color: hsl(256, 67%, 59%);
      }

      .grid1Inner1 section:nth-child(2) {
        background: hsl(39, 100%, 71%);
      }
      .grid1Inner2 section:nth-child(1) {
        background-color: hsl(256, 67%, 59%);
        color: hsl(0, 0%, 100%);
        padding-bottom: 5px;
        text-align: center;
      }
      .grid1Inner2 section:nth-child(1) img {
        width: 30%;
      }
      .grid1Inner2 section:nth-child(1) span {
        color: hsl(39, 100%, 71%);
      }

      .grid1Inner2 .doubleCard section:nth-child(1),
      .gridBottom section:nth-child(1) {
        background: hsl(0, 0%, 100%);
        color: hsl(0, 0%, 7%);
        text-align: left;
      }

      .grid1Inner2 .doubleCard section:nth-child(2) {
        background: hsl(39, 100%, 71%);
      }

      .doubleCard {
        display: flex;
        gap: 30px;
        color: hsl(0, 0%, 7%);
        padding-left: 10px;
        text-align: left;
      }
      .doubleCard section,
      .gridBottom section:nth-child(1) {
        box-shadow: -1px -2px 10px hsla(0, 0%, 0%, 0.185);
      }
      .doubleCard section:nth-child(1) img {
        margin: 0;
        width: 100%;
      }
      .doubleCard section:nth-child(2) img {
        width: 70%;
        margin: 10px auto;
      }
      .grid1Inner1 section:nth-child(2) img {
        width: 100%;
        margin: 5px 0;
      }
      .gridTop section:nth-child(2) img {
        margin: 10px auto;
        width: 100%;
      }

      section {
        overflow: hidden;
        width: 100%;
        border-radius: 8px;
        padding: 25px 4px 5px 15px;
      }
      .grid1Inner1 section {
        padding: 35px 4px 0 15px;
      }
      img {
        width: 50%;
        height: auto;
        display: block;
        margin: 20px auto 0;
      }

      .grow-card {
        background: hsl(256, 67%, 59%);
        color: white;
        display: flex;
        gap: 4px;
        align-items: center;
      }
      .gridBottom {
        gap: 30px;
        display: grid;
        grid-template-columns: minmax(230px, 1fr) auto;
      }
      .gridBottom section:first-child img{
width: 80%;
      }
      p {
        font-size: 18px;
      }
      .attribution {
        text-align: center;
      }
      .attribution a {
        color: hsl(256, 67%, 59%);
      }

      @media (max-width: 600px) {
        .grid {
          grid-template-columns: 1fr;
        }

        .grid1Inner2 {
          order: -1;
        }

        .grid1Inner1 {
          order: 1;
        }

        .gridTop {
          grid-template-columns: 1fr;
        }
        .gridTop p {
          text-align: center;
        }
        .gridUpper {
          order: -1;
          grid-template-rows: auto;
        }

        .gridTop > section {
          order: 1;
        }
        .doubleCard {
          flex-direction: column;
        }
        .doubleCard section {
          width: 100%;
          height: 100%;
        }
        .gridBottom {
          grid-template-columns: 1fr;
        }
        .gridBottom {
          max-height: none;
        }
        .gridBottom > section:last-child {
          order: -1;
        }
        .grow-card {
          flex-direction: column;
          padding: 10px;
        }
        img {
          min-width: 0;
          width: 70%;
          height: auto;
          display: inline;
          margin: 20px 0 0 10px;
        }

        .doubleCard section img {
          min-width: 0;
          width: 70%;
          height: auto;
        }
      }