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

body {
  font-family: "DM Sans", sans-serif;
  background: var(--white);
  margin: 0;
  padding: 1.5rem;
}

.maingrid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem 0;
}

.maingrid > div {
  border-radius: 1.2rem;
  padding: 1rem 1rem;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.box1 { background: var(--purple); color: var(--white);}
.box2 { background: var(--white);}
.box3 { background: var(--yellow);}
.box4 { background: var(--purple-light);}
.box5 { background: var(--purple); color: var(--white);}
.box6 { background: var(--white);}
.box7 { background: var(--yellow-light);}
.box8 { background: var(--yellow);}

h1, h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
  .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
}
.box1 h1  {
font-size: 2.5rem;
font-weight: 500;
text-align: center;

}
.box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box1 span {
    color: var(--yellow);
}
.box2 p {
    font-size: 1.5rem;
    font-weight: 500;
}
.box3 h2{
    font-size: 1.5rem;
font-weight: 500;
}
.box4 h2{
     font-size: 1.5rem;
font-weight: 500;
text-align: center;
}
.box4 p {
    font-weight: 500;
}
.box5 h2 {
        font-size: 2.3rem;
font-weight: 500;
text-align: center;
}
.box6 h2{
            font-size: 2rem;
font-weight: 400;
}
.box7 h2 {
        font-size: 1.5rem;
font-weight: 500;
}
.box7 span {
    color: var(--purple);
    
}
.box8 h2 {
            font-size: 1.5rem;
font-weight: 500;
}
@media (min-width: 900px) {
  .maingrid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr 1.1fr;
    grid-template-rows: 15rem 12rem 14rem;
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto;  
    padding: 2rem 0;
    background: var(--white);
    grid-template-areas:
      "box7   box1     box1    box4"
      "box8   box2     box3    box4"
      "box8   box6     box5    box5";
  }

  .box7 { grid-area: box7; }
  .box1 { grid-area: box1; }
  .box4 { grid-area: box4; }
  .box8 { grid-area: box8; }
  .box2 { grid-area: box2; }
  .box3 { grid-area: box3; }
  .box6 { grid-area: box6; }
  .box5 { grid-area: box5; }

  .maingrid > div {
    border-radius: 1.2rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    max-height: 100%;
   
  }
.box1 { background: var(--purple); color: var(--white);}
.box2 { background: var(--white); }
.box3 { background: var(--yellow); }
.box4 { background: var(--purple-light); }
.box5 { background: var(--purple); color: var(--white);}
.box6 { background: var(--white); }
.box7 { background: var(--yellow-light); }
.box8 { background: var(--yellow); }
.maingrid .followerimage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

}