html,
body {
  font-family: Andale Mono, monospace;
}
.top i {
  color: #f0e68c;
}
.container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 60% 40%;
  grid-template-areas: 'left right';
  box-shadow: 0 5px 10px rgb(0 0 0 / 0.5);
}
.top {
  display: flex;
  align-items: flex-end;
  grid-area: left;
}
.left {
  padding: 25px 70px;
}
.mid {
  grid-area: left;
}
.bot {
  grid-area: right;
}
.email-form {
  display: flex;
}
.email-form input {
  border-radius: 10px;
  padding: 10px;
  border: 2px solid #f0e68c;
  width: 100%;
}
.email-form button {
  margin-left: -20px;
  border-radius: 10px;
  color: white;
  background-color: #f0e68c;
  border: 2px solid #f0e68c;
}
.bot img {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      'top'
      'mid'
      'bot';
  }
  .left {
    grid-area: top;
  }
  .mid {
    grid-area: mid;
  }
  .bot {
    grid-area: bot;
  }
  .bot img {
    width: 100%;
    height: 40vh;
  }
}