.showcase {
  padding: 5px;
}

.ypoMain {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  border: 1px solid var(--themeOneBg);
  margin: 10px 0px;
  justify-content: space-evenly;
}

.ypo-l {
  background: var(--fontLight);
  justify-content: start;
}

.ypo-r {
  background: #f2f2f2;
  justify-content: end;
  text-align: right;
}

.ypo-l .ypoImg,
.ypo-r .ypoDiv {
  order: 1;
}

.ypo-l .ypoDiv,
.ypo-r .ypoImg {
  order: 2;
}

.ypoDiv {
  flex: 1;
}

.ypoImg img {
  border: 1px solid var(--themeOneBg);
  padding: 2px;
}

.ypoMain a {
  display: block;
}

@media screen and (max-width: 540px) {
  .ypo-r {
    text-align: left;
    justify-content: start;
  }

  .ypo-l .ypoImg,
  .ypo-r .ypoImg {
    order: 1;
    width: 100%;
  }

  .ypo-l .ypoDiv,
  .ypo-r .ypoDiv {
    order: 2;
    width: 100%;
  }
}