/* ===== Image Section ===== */
.hp-imgsec{
  width:100%;
  background:#fff;
}

.hp-imgsec-inner{
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
  align-items:stretch; /* important so both columns can fill same height */
}

@media (max-width: 900px){
  .hp-imgsec-inner{
    grid-template-columns:1fr;
  }
}

/* LEFT COLUMN: background cover */
.hp-imgsec-media{

  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background-color:rgba(0,0,0,.04);

  aspect-ratio:16/10;

  /* cover background */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* RIGHT COLUMN: center content both ways */
.hp-imgsec-content{
  display:flex;
  flex-direction:column;
  justify-content:center; /* vertical */
  align-items:center;     /* horizontal */
  text-align:center;      /* center text lines */
  padding:24px;           /* gives breathing room */
  min-height:100%;        /* helps when columns stretch */
}

/* If you want the paragraph not to get too wide */
.hp-imgsec-text{
  margin:0 0 16px;
  line-height:1.6;

  max-width:70ch;
}

.hp-imgsec-title{
  margin:0 0 10px;
  font-size:clamp(20px, 2.4vw, 34px);
  line-height:1.1;
  font-weight:900;
}