.s-container {
  display: grid;
  gap: 1.5rem;
  align-items: center;

  /* MOBIL */
  grid-template-columns: 1fr;

  grid-template-areas:
    "item2"
    "item1"
    "item3"
    "item4";
}


.s-box {
  width: 100%;
}


/* ===========================
   ITEMS
=========================== */

.s-item1 {
  grid-area: item1;
}

.s-item2 {
  grid-area: item2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-item2 img {
  display: block;
  width: 100%;
  height: auto;
}

.s-item3 {
  grid-area: item3;
}

.s-item4 {
  grid-area: item4;
}



/* ===========================
   TABLET
=========================== */

@media (min-width: 1199px) and (max-width: 1578px) {

  .s-container {

    column-gap: 3rem;
    row-gap: 1.5rem;

    grid-template-columns: repeat(2, 1fr);

    grid-template-areas:
      "item1 item2"
      "item3 item4";

    align-items: start;

  }


  .s-item1,
  .s-item2 {

    align-self: center;

  }


  .s-item3,
  .s-item4 {

    align-self: end;

  }

}



/* ===========================
   DESKTOP
=========================== */

@media (min-width: 1579px) {

  .s-container {

    column-gap: 3rem;
    row-gap: 1.5rem;

    grid-template-columns: 1fr 1fr;

    grid-template-areas:
      "item1 item2"
      "item3 item2"
      "item4 item2";

    align-items: start;
    align-content: start;

  }


  .s-item1,
  .s-item3,
  .s-item4 {

    align-self: start;

  }


  .s-item2 {

    align-self: center;

  }


  .s-item1 p,
  .s-item3 p,
  .s-item4 p {

    margin-top: 0;

  }

}