@media (orientation: landscape) {
  .intro-section {
    width: 50%;
    height: 100vh;
  }

  .intro-section:first-of-type {
    border-bottom: none;
  }

  .upper-triangle {
    border-left: 0vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 100vh solid var(--normal-color);
    opacity: 1;
  }

  .right:hover .upper-triangle {
    opacity: 0.85;
  }

  .lower-triangle {
    border-left: 50vw solid transparent;
    border-right: 0vw solid transparent;
    border-bottom: 100vh solid var(--normal-color);
    opacity: 1;
  }

  .left:hover .lower-triangle {
    opacity: 0.85;
  }

  .intro-title {
    width: 25vw;
    font-size: 3.89vh;
  }

  .left .intro-title {
    top: 70vh;
    right: 1.5vw;
    left: unset;
  }

  .left:hover .intro-title {
    top: 65vh;
    right: 5vw;
  }

  .right .intro-title {
    bottom: 57vh;
    left: 0vw;
  }

  .right:hover .intro-title {
    bottom: 49vh;
    left: 3vw;
  }

  .intro-description {
    display: block;
    position: absolute;
    color: white;
    font-size: 0.83dvw;
    padding-right: 0.83dvw;
    user-select: none;
    width: 35dvw;
    top: 80dvh;
    right: 2dvw;
  }

  .left-content .intro-description,
  .right-content .intro-description {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .right:hover .intro-description {
    top: -95vh;
    right: -39vw;
  }

  .left:hover .left-content .intro-description,
  .right:hover .right-content .intro-description {
    opacity: 1;
  }
}