/* Tide template custom CSS style v1.0 */
/* Using the examples, provide your own styling */

/*
.bg-primary {
     background-color: #your-color !important;
}
.text-primary {
     color: #your-color !important;
}
.btn-primary {
     background-color: #your-color !important;
     border-color: #your-color !important;
}
.btn-primary:hover {
     background-color: #your-hover-color !important;
     border-color: #your-hover-color !important;
}
.btn-primary:focus {
     background-color: #your-focus-color !important;
     border-color: #your-focus-color !important;
     box-shadow: 0 0 0 0.2rem rgba(#your-color, 0.5) !important;
}
.btn-primary:active {
     background-color: #your-active-color !important;
     border-color: #your-active-color !important;
}
.btn-primary:disabled {
     background-color: #your-disabled-color !important;
     border-color: #your-disabled-color !important;
}
*/
/* Responsive banner that scales down but never gets too tall */
.banner-hero {
  display: block;
  width: 100% !important;
  height: auto;                 /* default: scales down naturally */
  max-height: clamp(120px, 18vw, 220px) !important; /* cap height: min 160px, typical 25vw, max 320px */
  object-fit: cover;            /* if max-height is hit, crop nicely instead of squishing */
  border-radius: .5rem;         /* same look as .rounded */
}