@charset "UTF-8";
/* =========================================================
   SECCIÓN: TEXT BANNER (Clases originales: .banner1, .portrait)
   Adaptado para usar Custom Properties (var(--)).
========================================================= */
.banner1 {
  position: relative;
  height: 500px;
  display: grid;
  place-items: center;
  justify-content: space-between;
}
.banner1 #proposal {
  width: 100vw;
}
.banner1 .quote {
  grid-area: quote;
}

.quote {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 30vh;
  background-color: var(--color-topic-hover);
}
.quote img {
  width: 200px;
  height: 200px;
  transform: translateY(-100px);
}
.quote h3 {
  font-size: clamp(1rem, 1vw + 0.2rem, 1.5rem);
  width: 60ch;
  transform: translateX(-5vw);
}

.portrait {
  grid-area: port;
  position: absolute;
  right: 10vw;
  height: 30vw;
  z-index: 10;
}
.portrait img {
  border: 0.8vw solid var(--color-vivid-sky-blue);
  height: 100%;
  width: 20vw;
  background-position: center;
  background-size: cover;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Media Queries para text-banner
--------------------------------------------------------- */
@media screen and (max-width: 900px) {
  #proposal h3 {
    text-align: center;
    width: 80vw;
    margin: auto;
  }
  #proposal img {
    transform: translateY(-120px);
    position: absolute;
    width: 130px;
  }
  .portrait {
    display: none;
  }
  .quote {
    height: 250px;
  }
}/*# sourceMappingURL=text-banner.css.map */