#about {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#about-text {
  flex-basis: 45%;
}

#carousel {
  position: relative;
  overflow-y: hidden;
  flex-grow: 1;
}

.carousel-image {
  position: absolute;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.active {
  opacity: 1;
}

@media only screen and (min-width: 600px) {
  #about {
    width: 60%;
  }
}