.headline-container {
  position: relative;
  width: 100%;       /* Adjust as needed */
  max-width: 550px;
  max-height:640px;  /* Example max width if you want a limit */
  min-height:380px;
  margin: 0 auto;    /* Center the container if desired */
  overflow: hidden;  /* Ensures overlay is contained */
  
}

.headline-image {
  width:100%;
  max-height:600px;
  display:block;
  overflow:hidden;
}



.headline-title {
  margin: 0;
  font-size: 2rem;  /* Adjust for desired title size */
  font-weight: bold;
  line-height:95%;
  text-overflow: ellipsis;
  width:100%;
}

.headline-sub {
  margin-top: 15px auto;
  font-size: 0.8rem;
  color:#DDD;
  font-family:helvetica;
  background-color:#6D071A;
  display:inline-block;
  padding:1px;
  text-overflow: ellipsis;
  width:100%;
}

.headline-text {
  position: absolute;
  bottom: 0;
  top:65%;
  left: 0;
  width: 100%;
  color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.9) 70%
  );
         /* optional if you want text at bottom */
  align-items: flex-end;
}