/* Task 23.10: an intrinsic image must not size or overflow its grid track. */
body.doors-index #main-content .door-direction-grid .door-direction-card {
  display:grid;
  min-height:0;
  padding:20px 0;
  height:max(500px,min(calc(100svh - var(--site-header-height,150px)),calc(37.5vw + 270px)));
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:16px;
  overflow:visible;
}
body.doors-index #main-content .door-direction-grid .door-card-photo {
  position:relative;
  display:block;
  align-self:stretch;
  min-width:0;
  min-height:0;
  height:auto;
  aspect-ratio:auto;
  margin:0;
}
body.doors-index #main-content .door-direction-grid .door-card-photo img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  aspect-ratio:auto;
}
body.doors-index #main-content .door-direction-grid .door-card-copy {
  position:relative;
  min-width:0;
  margin:0;
  align-self:start;
}
@media(max-width:700px),(max-height:620px){
  body.doors-index #main-content .door-direction-grid .door-direction-card {
    height:auto;
    grid-template-rows:auto auto auto;
  }
  body.doors-index #main-content .door-direction-grid .door-card-photo {
    aspect-ratio:4/3;
  }
}