@charset "utf-8";


.box__content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 80px;
  margin-top: 400px;
}

.box {
  aspect-ratio: 16 / 9;
  background-color: #dedede;
  opacity: 0;
  visibility: hidden;
}


.in-fade-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.in-fade-up.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.in-fade-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.in-fade-left.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.in-fade-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.in-fade-right.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}