body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.grid-container {
    display: grid;
    gap: 10px;
    background-color: #ff005d;
    padding: 10px;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px;
    font-size: 30px;
}

.item1 {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.item2 {
    grid-column: 1 / span 3;
    grid-row: 2;
    display: grid;
    gap: 1em;
    font-size: 12px;
    font-weight: 500;
    text-align: start;
}

.item3 {
    grid-column: 1 / span 3;
    grid-row: 4;
}

.item4 {
    grid-column: 1 / span 3;
    grid-row: 5;
}

.image-section-detail {
    display: flex;
    flex-direction: column;
}

.image-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.image-section img {
    width: 250px;
    height: 250px;
    border-radius: 2em;
}

.instructions-detail-img img {
    max-width: 100%;
    height: auto;
}

.step {
    text-align: start;
    padding: 2em;
}

  @media only screen and (min-width: 500px) {

      .item1 {
      grid-column: 1 / span 3;
      grid-row: 1;
      }
  
      .item2 {
      grid-column: 1;
      grid-row: 2;
      display: grid;
      gap: 1em;
      font-size: 15px;
      font-weight: 500;
      text-align: start;
      }
      .item3 {
      grid-column: 1/ span 3;
      grid-row: 4;
      }
  
      .item4 {
      grid-column: 1 / span 3;
      grid-row: 5;
      }
  
      .image-section-detail{
        display: flex;
        flex-direction: row;
        gap: 2em;
    }
  }
  @media screen and (min-width: 764px) {


      .item1 {
      grid-column: 1 / span 3;
      grid-row: 1;
      }
  
      .item2 {
      grid-column: 1;
      grid-row: 2;
      display: grid;
      gap: 1em;
      font-size: 20px;
      font-weight: 500;
      text-align: start;
      }
        .cookstep{
            border-left: 5px solid #2196F3;
            padding: 2em;
        }

        .cookstep img{
            max-width: 100%;
        }
      .item3 {
      grid-column: 3;
      grid-row: 2/ span 3;
      }
  
      .item4 {
      grid-column: 1 / span 3;
      grid-row: 5;
      }
      .item4 {
      grid-column: 1 / span 3;
      grid-row: 5;
      }

  }