/* O celular é o protagonista da apresentação da identidade visual. */
.id-visual-page .id-hero-art {
  min-height: 545px;
}

.id-visual-page .art-card-back {
  top: 66px;
  right: 15px;
  width: 250px;
  height: 326px;
  opacity: .66;
}

.id-visual-page .art-card-main {
  top: -18px;
  left: 51px;
  width: 355px;
  height: 530px;
  border-radius: 22px;
  transform: rotate(-3deg);
}

.id-visual-page .art-card-main.art-phone img {
  object-position: center;
}

.id-visual-page .art-tag {
  right: 0;
  bottom: 28px;
}

@media (max-width: 800px) {
  .id-visual-page .id-hero-art {
    width: min(100%, 420px);
    min-height: 480px;
  }

  .id-visual-page .art-card-main {
    left: 30px;
    width: 310px;
    height: 455px;
  }
}

@media (max-width: 520px) {
  .id-visual-page .id-hero-art {
    min-height: 416px;
  }

  .id-visual-page .art-card-main {
    top: 0;
    left: 23px;
    width: 264px;
    height: 390px;
  }

  .id-visual-page .art-card-back {
    top: 39px;
    width: 200px;
    height: 270px;
  }

  .id-visual-page .art-tag {
    right: 0;
    bottom: 17px;
  }
}