.grid {
    /* background: hsl(210, 11%, 96%); */
    width: 100%;
    max-width: 1500px;
    /* height: 1000px; */
    display: grid;
    gap: 1.5vw;
    padding: 1vw;
    height: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;  
    grid-template-areas:
        "one two two three"
        "one two two three"
        "one two two three"
        "one four five three"
        "six four five three"
        "six four five three"
        "six seven eight eight"
        "six seven eight eight";                
}



@media screen and (max-width: 1000px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "onne   two   three   four"
            "one   two   three   four"
            "five six seven eight"
            "five six seven eight";
    }
}

@media screen and (max-width: 750px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas:
            "one"
            "one"
            "two"
            "two"
            "three"
            "three"
            "four"
            "four"
            "five"
            "five"
            "six"
            "six"
            "seven"
            "seven"
            "eight"
            "eight";
    }
}

.item {
    border: 2px solid #fdfafa;
    border-radius: 10px;
}
.grid .item:nth-child(1) {
    grid-area: one;
    background-color: rgb(252, 209, 215);
}
.grid .item:nth-child(2) {
    grid-area: two;
  background-color: #8061c3;
  color: white;
}

.grid .item:nth-child(3) {
    grid-area: three;
    background-color: #bac5dc;
}
.grid .item:nth-child(4) {
    grid-area: four;
}

.grid .item:nth-child(5) {
    grid-area: five;
    background-color: #fec46a;
}

.grid .item:nth-child(6) {
    grid-area: six;
    background-color: #fec46a;

}

.grid .item:nth-child(7) {
    grid-area: seven;
    background-color: white;
}
.grid .item:nth-child(8) {
    grid-area: eight;
    background-color: #8061c3;
}



  .div_st_1 {
    margin: auto;
    text-align: center;
    align-content: center;
    /* height: 100%; */
    width: 260px;
    height: 518px;
  }

  .div_st_2 {
    margin: auto;
    text-align: center;
    align-content: center;
    width: 700px;
    height: 518px;
  
  }
  .div_st_3 {
  margin: auto;
  text-align: center;
  align-content: center;
  width: 365px;
  height: auto;
  }


  .div_st_4 {
  margin: auto;
  background-color: white;
  }

  .div_st_5 {
  margin: auto;
  padding: 27px;
  }
  .div_st_6 {
    margin: auto;
    align-content: start;
    height: auto;
}

.div_st_7 {
    margin: auto;
    text-align: center;
    align-content: center;
    height: 100%;
    width: 260px;
    height: 518px;
    }


.div_st_8 {
display: flex;
  margin: auto;
  color: white;
}