@import url('internal-base.css');

.hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-photo::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 88px 0 0 48%;
  background-image: var(--hero-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: var(--hero-position, center 28%);
}

.hero-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  display: none;
}

.hero-photo { background: var(--escuro); }

.hero-photo > div {
  position: relative;
  z-index: 1;
}

.photo {
  background-position: var(--photo-position, center);
  background-size: contain;
  background-repeat: no-repeat;
}

.ebook-band {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
}

.ebook-photo {
  min-height: 570px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 18%;
}

@media (max-width: 850px) {
  .ebook-band { grid-template-columns: 1fr; }
  .ebook-photo { min-height: 440px; }
  .hero-photo::before {
    inset: 82px 0 auto;
    height: 48vh;
    background-position: var(--hero-position-mobile, var(--hero-position, center 22%));
  }

  .hero-photo { min-height: auto; padding-top: calc(48vh + 118px); }

  .hero-photo h1 {
    font-size: clamp(42px, 12vw, 68px);
  }
}