@import '~styles/mixins';
@import '~styles/common';

.introduction {
  .introduction-wrapper {
    display: flex;
    align-items: center;
    max-height: 100vh;
    overflow: hidden;
    .left-wrapper,
    .right-wrapper {
      width: 50%;
    }

    .left-wrapper {
      text-align: center;
      .logo-wrapper {
        max-width: 120px;
        margin: 0 auto 50px auto;
        img {
          width: 100%;
          max-width: 100%;
        }
      }

      .content {
        max-width: 430px;
        margin: 0 auto;

        .dots-wrapper {
          width: fit-content;
          margin: 30px auto 50px auto;
          display: flex;
          align-items: center;

          .dot {
            cursor: pointer;
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            background-color: $color-dark-blue;
            margin: 5px;
            border-radius: 20px;
            opacity: 0.5;

            &.active {
              opacity: 1;
            }
          }
        }
      }
    }

    .right-wrapper {
      img {
        object-fit: cover;
        width: 100%;
        max-width: 100%;
      }
    }
  }
}
