/* TODO - find colour to match background of body */

:root {
  --purple-100: hsl(254, 88%, 90%);
  --purple-500: hsl(256, 67%, 59%);
  --yellow-100: hsl(31, 66%, 93%);
  --yellow-500: hsl(39, 100%, 71%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 7%);
  --border-radius: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: #f8f8ff;
  font-size: 18px;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.main-container {
  width: 375px;
  background-color: #f8f8ff;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 15rem 9rem 12rem 25rem 21rem 12rem 12rem 20rem;
  /* grid-template-rows: 270px 162px 216px 450px 378px 216px 216px 360px*/
  gap: 30px;
  padding: 20px;
}

.item-1 {
  width: 100%;
  background-color: var(--purple-500);
  border-radius: var(--border-radius);
  color: var(--white);
  padding: 20px;
  text-align: center;

  & .text-wrapper {
    width: 90%;
    margin: 0 auto;
    height: 50%;

    & .item-1-main-text {
      margin: 1rem 0 1rem 0;
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 90%;
    }

    & .item-1-yellow-text {
      color: var(--yellow-500);
    }
  }

  & .five-star-review {
    width: 65%;
    margin-top: 20px;
  }

  & .item-1-subtext {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
  }
}

.item-2 {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 20px;
  width: 100%;

  & .item-2-image {
    width: 100%;
    background: var(--white);
  }

  & .item-2-text {
    line-height: 95%;
    margin: 0.3rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -2px;
  }
}

.item-3 {
  width: 100%;
  background-color: var(--yellow-500);
  border-radius: var(--border-radius);
  padding: 15px 20px 0 20px;
  overflow: hidden;

  & .item-3-text {
    margin: 0;
    line-height: 95%;
    font-size: 1.5rem;
    letter-spacing: -2px;
    font-weight: 600;
  }

  & .item-3-image {
    width: 70%;
    margin-top: 15px;
  }
}

.item-4 {
  width: 100%;
  background-color: var(--purple-100);
  border-radius: var(--border-radius);
  padding: 15px 20px 0 20px;
  text-align: center;

  & .item-4-text {
    font-size: 1.5rem;
    letter-spacing: -2px;
    font-weight: 600;
    margin: 10px 0 20px 0;
  }

  & .item-4-image {
    width: 100%;
  }

  & .item-4-subtext {
    font-size: 1rem;
    font-weight: 500;
    margin: 20px 0 0 0;
    line-height: 95%;
  }
}

.item-5 {
  width: 100%;
  background-color: var(--purple-500);
  border-radius: var(--border-radius);
  padding: 30px 20px 0 20px;
  text-align: center;

  & .item-5-image {
    width: 75%;
  }

  & .item-5-text {
    color: var(--white);
    font-size: 1.6rem;
    margin: 40px 30px 30px 30px;
    font-weight: 500;
    line-height: 90%;
  }
}

.item-6 {
  width: 100%;
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 20px 20px 0 20px;

  & .item-6-text {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 500;
  }

  & .item-6-subtext {
    margin: 8px 0 20px 0;
    font-weight: 400;
  }

  & .item-6-image {
    width: 60%;
  }
}

.item-7 {
  width: 100%;
  background-color: var(--yellow-100);
  border-radius: var(--border-radius);
  padding: 20px 20px 0 30px;

  & .item-7-text {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    letter-spacing: -2px;
    font-weight: 600;
    line-height: 95%;
  }

  & .item-7-text-italic {
    color: var(--purple-500);
  }

  & .item-7-image {
    width: 60%;
  }
}

.item-8 {
  width: 100%;
  background-color: var(--yellow-500);
  border-radius: var(--border-radius);
  padding: 20px 20px 0 20px;

  & .item-8-text {
    margin: 10px 0 20px 0;
    font-size: 1.8rem;
    letter-spacing: -2px;
    font-weight: 600;
    line-height: 97%;
  }

  & .item-8-image {
    width: 75%;
  }
}

/* grid-template-rows: 270px 162px 216px 450px 378px 216px 216px 360px*/

@media only screen and (min-width: 768px) {
  .main-container {
    width: 700px;
    display: grid;
    padding: 40px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(12, 100px);
    gap: 20px;
  }

  .item-1 {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .item-2 {
    grid-column: 1/2;
    grid-row: 10/12;
  }

  .item-3 {
    grid-column: 2/3;
    grid-row: 1/3;
  }

  .item-4 {
    grid-column: 2/3;
    grid-row: 7/11;
  }

  .item-5 {
    grid-column: 1/2;
    grid-row: 7/10;
  }

  .item-6 {
    grid-column: 2/3;
    grid-row: 3/5;
  }

  .item-7 {
    grid-column: 2/3;
    grid-row: 5/7;
  }

  .item-8 {
    grid-column: 1/2;
    grid-row: 4/7;
  }
}

@media only screen and (min-width: 1440px) {
  .main-container {
    display: grid;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    padding: 50px 200px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(10, 1fr);

    gap: 30px;
  }

  .item-1 {
    grid-column: 3/7;
    grid-row: 1/5;

    & .text-wrapper {
      text-align: center;
      

      & .item-1-main-text {
        font-size: 60px;
        padding-top: 20px;
      }
    }

    & .five-star-review {
      width: 40%;
      margin-top: 20px;
    }

    & .item-1-subtext {
      font-size: 1.2rem;
      font-weight: 400;
      margin: 0;
    }
  }

  .item-2 {
    grid-column: 3/5;
    grid-row: 5/8;
    overflow: hidden;

    & .item-2-image {
      width: 150%;
      background: var(--white);
      height: 35%;
    }

    & .item-2-text {
      line-height: 95%;
      margin: .5rem 0;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -2px;
      padding-right: 60px
    }
  }

  .item-3 {
    grid-column: 5/7;
    grid-row: 5/8;
    text-align: center;

    & .item-3-text {
      margin: 0 0 0 12px;
      line-height: 95%;
      font-size: 1.6rem;
      letter-spacing: -2px;
      font-weight: 600;
      text-align: start;
      padding-right: 40px;
    }

    & .item-3-image {
      width: 90%;
      margin: 15px auto 0 auto;
    }
  }

  .item-4 {
    grid-column: 7/9;
    grid-row: 1/8;
    padding: 30px;
    text-align: start;
    overflow: hidden;

    & .item-4-text {
      font-size: 1.7rem;
      letter-spacing: -2px;
      font-weight: 600;
      margin: 15px 0 15px 0;
      line-height: 90%;
      padding-right: 40px;
    }

    & .item-4-image {
      width: 180%;
    }

    & .item-4-subtext {
      font-size: 1.1rem;
      font-weight: 500;
      margin: 20px 0 0 0;
      line-height: 95%;
    }
  }

  .item-5 {
    grid-column: 5/9;
    grid-row: 8/11;
    text-align: start;
    display: flex;
    padding: 30px 15px 30px 30px;

    & .item-5-image {
      width: 50%;
    }

    & .item-5-text {
      color: var(--white);
      font-size: 2.3rem;
      font-weight: 500;
      line-height: 90%;
      margin: auto 0;
      padding-left: 15px
    }
  }

  .item-6 {
    grid-column: 3/5;
    grid-row: 8/11;

    & .item-6-text {
      margin: 0;
      font-size: 3.3rem;
      font-weight: 500;
    }
  
    & .item-6-subtext {
      margin: 8px 0 0px 0;
      font-size: 1rem;
      font-weight: 400;
    }
  
    & .item-6-image {
      margin-top: 20px;
      width: 70%;
    }
  }

  .item-7 {
    grid-column: 1/3;
    grid-row: 1/6;

    & .item-7-text {
      margin: 50px 0 20px 0;
      font-size: 2rem;
      letter-spacing: -2px;
      font-weight: 600;
      line-height: 95%;
    }
  
    & .item-7-text-italic {
      color: var(--purple-500);
    }
  
    & .item-7-image {
      width: 90%;
    }
  }

  .item-8 {
    grid-column: 1/3;
    grid-row: 6/11;
    display: flex;
    flex-direction: column;

    & .item-8-text {
      margin: 10px 0 15px 0;
      font-size: 1.7rem;
      letter-spacing: -2px;
      font-weight: 600;
      line-height: 97%;
      padding-left: 5px;
      padding-right: 60px;
    }
  
    & .item-8-image {
      width: 95%;
      margin: 30px auto;
    }
  }
}