style.css

/* #cy {
    width: 100vw;
    height: 80vh;
    display: block;
} */

body {
  padding: 0;
  margin: 0;
}

#cy {
  height: 400px;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* .view {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
}

.view .visual {
  height: 100%;
  width: 50%;
  margin: 0;
  padding: 10px;
}

.view .visual #cy {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.view .info {
  height: 100%;
  width: 40%;
  margin: 0;
  padding: 10px;
} */

.container {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0px;
  margin-top: 30px;
}

.container .row .col-md-6 {
  border: 1px solid black;
}

.container .row .info .heading {
  text-align: center;
}

.container .row .info .content p .title,
.container .row .info .message p {
  font-weight: 600;
}

.container .row .info .content {
  display: none;
}

@media(max-width: 400px){
  #cy {
    height: 290px;
  }
  .container .row .visual {
    height: 250px;
  }
};