/* Row of cards from [katz_cards]. 26px gap, stacks on mobile */
.katz-cards{
  display: flex;
  gap: 26px;
}
.katz-cards > .katz-card{
  flex: 1 1 0;
  min-width: 0;
}

/* Katz card. Values from the prototype service card */
.katz-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  background: #0D0D0D;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.katz-card .katz-card-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .95;
  margin: 0;
}
.katz-card-focus-top .katz-card-img{ object-position: center top; }
.katz-card-focus-bottom .katz-card-img{ object-position: center bottom; }

/* Gradient rises from the bottom so the photo stays bright with no hard edge */
.katz-card .katz-card-body{
  position: relative;
  z-index: 2;
  padding: 96px 34px 34px;
  background: linear-gradient(to top,
    rgba(13,13,13,.94) 0%,
    rgba(13,13,13,.86) 40%,
    rgba(13,13,13,.55) 72%,
    rgba(13,13,13,0) 100%);
}

/* Fonts read the child theme variables, fall back to inherit elsewhere */
.katz-card .katz-card-heading{
  font-family: var(--katz-font-display, inherit);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.katz-card .katz-card-text{
  font-family: var(--katz-font-body, inherit);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #F0EEE9;
  margin: 0;
}

/* Tablet */
@media (max-width: 1024px){
  .katz-card{ min-height: 440px; }
  .katz-card .katz-card-body{ padding: 26px 24px 28px; }
}

/* Mobile */
@media (max-width: 767px){
  .katz-cards{ flex-direction: column; }
  .katz-card{ min-height: 320px; }
  .katz-card .katz-card-heading{ font-size: 21px; }
}