.beforeafter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 30px 0;
}

.beforeafter > .before {
  width: calc(40% - 40px);
  align-items: flex-start;
}

.beforeafter > .arrow {
  width: 80px;
  text-align: center;
}

.beforeafter > .after {
  width: calc(60% - 40px);
}

.columns1 > .liner {
  margin: 30px 0;
}

.columns2 > .liner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0;
}

.columns2 > .liner > .column2 {
  width: calc(50% - 5px);
}

.columns3 > .liner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0;
}

.columns3 > .liner > .column3 {
  width: calc((100% - 20px) / 3);
}

@media screen and (max-width: 768px) {
  .columns2 > .liner {
    display: block;
  }
  
  .columns2 > .liner > .column2 {
    width: auto;
  }
  
  .columns3 > .liner {
    display: block;
  }
  
  .columns3 > .liner > .column3 {
    width: auto;
  }
}