.intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 1.39vw;
  margin-bottom: 4vw;
}

.intro__text {
  width: 60%;
  padding: 6.94vw 0 8.333vw 8.333vw;
}

.intro__title {
  font-family: CraftWorkBold;
  margin-bottom: 3.33vw;
  line-height: 1.15;
}

.intro__title h1 {
  position: relative;
  font-size: 4.2vw;
}

.intro__title span {
  font-size: 4.16vw;
}

.intro__notation {
  font-family: Roboto !important;
  font-size: 1.38vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
}

.intro__notation > .container {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.intro__notation > span {
  line-height: 1.3;
  padding-left: 1%;
}

h1 > .intro__star {
  position: absolute;
  width: 1.66vw;
  height: 1.8vw;
  top: 14%;
  right: 0.3%;
}

.intro__star {
  width: 9%;
}

.intro__star svg {
  display: block;
  width: 100%;
}

.intro__media {
  position: relative;
  width: 40%;
}

.intro__card {
  position: absolute;
  top: 29%;
  left: 2%;
  width: 31.5vw;
  height: 38.6vw;
  background-color: transparent;
  z-index: 1;
  -webkit-perspective-origin: 55.555vw 167%;
          perspective-origin: 55.555vw 167%;
  -webkit-perspective: 1vw;
          perspective: 1vw;
}

.intro__card, .intro__card > * {
  border-radius: 3.61vw;
}

.intro__emblem {
  position: absolute;
  top: 30%;
  left: 7%;
  width: 28vw;
  height: 37.7vw;
  background-color: transparent;
  z-index: 1;
  -webkit-perspective-origin: 55.555vw 167%;
          perspective-origin: 55.555vw 167%;
  -webkit-perspective: 1vw;
          perspective: 1vw;
}

.intro__emblem img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(-0.001deg);
          transform: rotateY(-0.001deg);
}

.intro__border {
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(-0.12deg);
          transform: rotateY(-0.12deg);
  border: 1px solid #B8D5F6;
  background-image: radial-gradient(97.57% 210.75% at 0.9% 2.98%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  -webkit-box-shadow: 80px 80px 60px rgba(0, 0, 0, 0.1);
          box-shadow: 80px 80px 60px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 630px) {
  .intro {
    display: block;
    border-radius: 1.29vw;
    margin: 1vw 0 35.3vw;
  }
  .intro__text {
    width: 100%;
    padding: 7.23vw 6.15vw 7.15vw 2.1vw;
  }
  .intro__title {
    margin: 0 6.28vw 5.7vw 4vw;
  }
  .intro__title h1 {
    font-size: 6.3vw;
    line-height: 9.23vw;
    display: block;
  }
  .intro__title span {
    font-size: 6.15vw;
    line-height: 8.5vw;
    display: block;
  }
  .intro__notation {
    font-size: 3.64vw;
    width: 80%;
  }
  .intro__notation > span {
    line-height: 4.62vw;
    padding-left: 2.05vw;
  }
  h1 > .intro__star {
    width: 2.03vw;
    height: 2.03vw;
    top: 3%;
    right: 0.4%;
  }
  .intro__star {
    width: 11%;
  }
  .intro__media {
    left: 41%;
  }
  .intro__emblem {
    width: 100%;
    height: 48vw;
  }
  .intro__emblem img {
    -webkit-transform: rotateY(-0.03deg);
            transform: rotateY(-0.03deg);
  }
  .intro__card {
    width: 39.85vw;
    height: 49.67vw;
  }
  .intro__card, .intro__card > * {
    border-radius: 5.64vw;
    top: -2vw;
  }
  .intro__border {
    -webkit-box-shadow: 46px 35px 44px rgba(0, 0, 0, 0.1);
            box-shadow: 46px 35px 44px rgba(0, 0, 0, 0.1);
  }
}