.intro-section {
  position: relative;
  cursor: pointer;
  overflow: clip;
  width: 100%;
  height: 50dvh;
  box-sizing: border-box;
}

.intro-section:first-of-type {
  border-bottom: 0.1vh solid var(--hover-color);
}

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  object-position: top center;
  color: transparent;
  z-index: 0;
}

.upper-triangle {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  border-left: 0vw solid transparent;
  border-right: 100vw solid transparent;
  border-top: 50vh solid var(--normal-color);
  transition: border-top-color 0.3s ease;
  opacity: 0.85;
}

.lower-triangle {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  border-left: 100vw solid transparent;
  border-right: 0vw solid transparent;
  border-bottom: 50vh solid var(--normal-color);
  transition: border-bottom-color 1.2s ease;
  opacity: 0.85;
}

.intro-title {
  position: absolute;
  width: 50vw;
  user-select: none;
  text-align: center;
  font-size: 3.89dvw;
  transition: top 1s ease-in-out, bottom 1s ease-in-out, right 1s ease-in-out,
    left 1s ease-in-out;
  color: var(--hover-color);
}

.left .intro-title {
  top: 33dvh;
  left: -54vw;
  right: unset;
}

.right .intro-title {
  bottom: 31dvh;
  left: 7vw;
}

.intro-description {
  display: none;
}