.grad_container {
  display: flex;
  flex-wrap: wrap; /* Allow flex items to wrap */
}

.left-box, .right-box {
  flex: 1 1 50%; /* Both boxes will take up 50% of the container width */
  padding: 10px;
  box-sizing: border-box; /* Include padding in width calculation */
}
.right-box-hero {
  flex: 1 1 50%; /* Both boxes will take up 50% of the container width */
  padding: 10px;
  box-sizing: border-box; /* Include padding in width calculation */
}

@media (max-width: 600px) {
	.left-box, .right-box {
		padding: 5px;
		margin-left: 1px;
	}
	.right-box{
		order: 1;
	}
  .right-box-hero {
	padding: 0px;
    order: -1; /* Move the right box to the top */
  }
}