.azt-rooftop-intro {
  --azt-ri-bg: #ffffff;
  --azt-ri-navy: #123a62;
  --azt-ri-text: #2a2f35;
  width: 100%;
  background: var(--azt-ri-bg);
  color: var(--azt-ri-text);
}

.elementor-widget-azotea_rooftop_intro {
  width: 100%;
}

.azt-rooftop-intro *,
.azt-rooftop-intro *::before,
.azt-rooftop-intro *::after {
  box-sizing: border-box;
}

.azt-rooftop-intro__inner {
  width: min(1750px, calc(100% - clamp(24px, 5vw, 88px)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  align-items: start;
}

.azt-rooftop-intro__media {
  margin: 0;
  align-self: start;
}

.azt-rooftop-intro__media img {
  width: 100%;
  height: auto;
  min-height: clamp(420px, 42vw, 760px);
  max-height: clamp(520px, 56vw, 960px);
  object-fit: cover;
  display: block;
}

.azt-rooftop-intro__content {
  position: relative;
  padding: clamp(34px, 5vw, 92px) clamp(20px, 3.1vw, 62px) clamp(30px, 4vw, 64px);
  display: flex;
  flex-direction: column;
}

.azt-rooftop-intro__title {
  margin: 0;
  color: var(--azt-ri-navy);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 4.6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 8.6ch;
}

.azt-rooftop-intro__title::after {
  content: "";
  display: block;
  width: min(320px, 100%);
  height: 3px;
  margin-top: clamp(16px, 1.6vw, 24px);
  background: color-mix(in srgb, var(--azt-ri-navy) 84%, white);
}

.azt-rooftop-intro__text {
  margin-top: clamp(20px, 2.2vw, 30px);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(19px, 1.18vw, 24px);
  line-height: 1.35;
}

.azt-rooftop-intro__text p {
  margin: 0;
}

.azt-rooftop-intro__text p + p {
  margin-top: 14px;
}

.azt-rooftop-intro__watermark {
  margin-top: auto;
  margin-left: auto;
  opacity: 0.68;
  max-width: clamp(48px, 5vw, 92px);
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .azt-rooftop-intro__inner {
    grid-template-columns: 1fr;
  }

  .azt-rooftop-intro__media img {
    min-height: 360px;
  }

  .azt-rooftop-intro__title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .azt-rooftop-intro__content {
    padding: 28px 14px 34px;
  }
}