.mission{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2em;
  box-sizing: border-box;
}
.mission .box_mission {
  position: relative;
  border-radius: 0.5em;
  background-color: var(--bg-card);
  border: 3px solid var(--bg-card);
  padding: 1em;
  height: fit-content;
}
.mission .personae{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 2;
  align-items: start;
}
.mission .persona{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.first_half{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' %3E%3Cpath d='M 0 0 L 0 100 L 0 75 L 100 50' stroke-width='0.5' stroke='Gray' fill='none' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em 100%;
}
.first_half:first-child{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' %3E%3Cpath d='M 0 100 L 0 75 L 100 50' stroke-width='0.5' stroke='Gray' fill='none' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
}
.second_half{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' %3E%3Cpath d='M 0 100 L 0 0 L 0 25 L 100 50' stroke-width='0.5' stroke='Gray' fill='none' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em 100%;
}
.second_half:last-child{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' %3E%3Cpath d='M 0 0 L 0 25 L 100 50' stroke-width='0.5' stroke='Gray' fill='none' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
}
.mission .box_persona{
  display: flex;
  flex-direction: row;
  border-radius: 0.5em;
  background-color: var(--bg-explanation);
  padding: 0.4em 1em;
  height: fit-content;
  margin: 0.5em 0 0.5em 1em;
  width: fit-content;
}
.mission .box_persona h2, .box_impact h3 {
  text-align: center;
  margin: 0;
}
.mission .impacts{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 2;
  align-items: start;
}
.mission .impact{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mission .box_impact{
  border-radius: 0.5em;
  background-color: var(--bg2);
  padding: 0.4em 1em;
  height: fit-content;
  margin: 0.5em 0 0.5em 1em;
  width: fit-content;
  display: inline-block;
}
.mission .features{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 2;
  align-items: start;
}
.mission .box_feature{
  border-radius: 0.5em;
  background-color: var(--bg3);
  padding: 0.4em 1em;
  height: fit-content;
  margin: 0.5em 0 0.5em 1em;
  width: fit-content;
  display: inline-block;
}
.mission *:has(> .add){
  opacity: 0.7;
}


@media (max-width:480px) {
  .mission{
    flex-direction: column;
  }
  .mission .box_mission {
    width: 90%;
  }
  .mission .persona{
    align-items: start;
    flex-direction: column;
  }
  .mission .box_persona{
    margin-bottom: 0;
  }
  .first_half, .first_half:first-child, .second_half{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' %3E%3Cpath d='M 0 100 L 0 0 L 0 20 L 100 20' stroke-width='0.5' stroke='Gray' fill='none' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
    margin-left: 2px;
  }
  .mission .impacts{
    padding-left: 1em;
  }

}