.exercises {
  display: flex;
  justify-content: center;
}

.section-1 {
  background-image: linear-gradient(to right, cornflowerblue, skyblue);
  border-radius: 8px;
  display: flex;
  height: 80px;
  overflow-x: scroll;
  width: 330px;
}

.user-photo {
  border-radius: 200px;
  height: 50px;
  width: 50px;
}

span {
  color: lab(0% 0 0);
  display: flex;
  font-size: small;
  justify-content: center;
}

.badge {
  padding: 8px;
}

.section-2 {
  background-image: linear-gradient(to right, #64ed6b, #87ceeb);
  border-radius: 8px;
  display: flex;
  flex-direction: row-reverse;
  height: 80px;
  overflow-x: visible;
  width: 330px;
}

.section-3 {
  background-image: linear-gradient(to right, #ed6464, #ebe887);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  height: 64px;
  overflow-y: scroll;
  width: 240px;
}

.badge-column {
  display: flex;
  flex-direction: column;
  width: 60px;
}

.box-1 {
  background-color: #64ed6b;
  border-radius: 8px;
  display: flex;
  height: 240px;
  justify-content: center;
  overflow-y: scroll;
  width: 240px;
}

.box-2 {
  background-color: lab(0% 0 0);
  height: 320px;
  margin: 10px;
  width: 220px;
}

.bar {
  background-color: #87ceeb;
  display: flex;
  height: 90px;
  overflow: scroll;
  width: 220px;
}