body {
  margin: 0;
  padding: 20px;
  background-color: #000000;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
}

.wrapper1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px;
}

.wrapper2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin: 20px;
}

.wrapper3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 20px;
}

.wrapper4 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 20px;
}

.quarter_box {
  flex: 1 1 25%;
  border: 1px solid #7c3aed44;
  border-left: 4px solid #7c3aed;
  margin: 10px;
  padding: 2%;
  border-radius: 10px;
}

.third_box {
  flex: 1 1 33.333%;
  border: 1px solid #0ea5e944;
  border-left: 4px solid #0ea5e9;
  margin: 10px;
  padding: 2%;
  border-radius: 10px;
}

.half_box {
  flex: 1 1 50%;
  border: 1px solid #ec489944;
  border-left: 4px solid #ec4899;
  margin: 10px;
  padding: 2%;
  border-radius: 10px;
}

.twothirds_box {
  flex: 2 1 66.666%;
  border: 1px solid #22c55e44;
  border-left: 4px solid #22c55e;
  margin: 10px;
  padding: 2%;
  border-radius: 10px;
}

.onethird_box {
  flex: 1 1 33.333%;
  border: 1px solid #22c55e44;
  border-left: 4px solid #22c55e;
  margin: 10px;
  padding: 2%;
  border-radius: 10px;
}

@media (max-width: 728px) {
  .wrapper1,
  .wrapper2,
  .wrapper3,
  .wrapper4 {
    flex-direction: column;
  }

  .quarter_box,
  .third_box,
  .half_box,
  .onethird_box,
  .twothirds_box {
    width: auto;
  }
}