section#s4 {
  padding-top: var(--mergPad);
  margin-top: var(--mergPad);

  position: relative;
  background: linear-gradient(to right, #fff2cd 0%, #fff6df 50%, #fff2cd 100%);
  display: grid;
  grid-template: 
  "title"
  "hands"
  "panel"
  /1fr;
  gap: var(--mergPad);
  justify-items: center;
}
section#s4 > div#square {
  display: none;
}
section#s4 > div#title{
  text-align: center;
  grid-area: title;
}
#svg_hands{
  max-width: 800px;
  width: 100%;
  grid-area: hands;
}
section#s4 img{
  max-width: 100%;
}
section#s4 div#panel {
  z-index: 2;
  background: #807f87;
  padding: calc(var(--mergPad) / 2);
  max-width: 360px;
  max-height: 700px;
  display: grid;
  grid-auto-rows: max-content;
  justify-items:center;
  gap: var(--padSide);
  color: white;
  grid-area: panel;
}
section#s4 div#panel > div{
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--padSide);
}

/****** For Laptop *****/
@media screen and (min-width: 960px) {
  section#s4 {
    padding-bottom: var(--mergPad);
    grid-template: 
    ". title"
    "panel hands"
    /max-content minmax(300px,800px);
    justify-content: center;
  }

  section#s4 > div#square {
    display: initial;
    position: absolute;
    overflow: hidden;
    width: 250px;
    height: 490px;
    top: -150px;
    right: 0px;
  }
  section#s4 > div#square::before {
    transform: rotate(60deg);
    left: 75px;
    top: 15px;
    box-sizing: border-box;
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border: 30px solid rgba(134, 146, 0, 0.3);
  }
}