/* DIA MOTORS — square case cards */
#examples .cases-grid {
  align-items: start;
}

#examples article.case-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

#examples .cases-grid > article.case-card:nth-child(4) {
  grid-column: 2 / span 2;
}
#examples .cases-grid > article.case-card:nth-child(5) {
  grid-column: 4 / span 2;
}

@media (max-width: 1023px) {
  #examples .cases-grid > article.case-card:nth-child(4),
  #examples .cases-grid > article.case-card:nth-child(5) {
    grid-column: auto;
  }
}

#examples article.case-card > .case-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

#examples article.case-card img {
  object-fit: cover !important;
  object-position: center center !important;
}

#examples article.case-card > .case-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border-top: none !important;
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.96) 0%,
    rgba(8, 8, 8, 0.7) 55%,
    transparent 100%
  );
}

#examples article.case-card .bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.9) 0%,
    rgba(8, 8, 8, 0.35) 45%,
    transparent 70%
  ) !important;
  z-index: 1;
}

#examples article.case-card > .case-body h3 {
  font-size: 0.72rem;
  line-height: 1.25;
}

#examples article.case-card > .case-body .mt-3 {
  margin-top: 0.45rem;
  font-size: 0.65rem;
}

#examples article.case-card > .case-body .mt-4 {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
}

#examples article.case-card > .case-body .text-xl {
  font-size: 1.05rem;
  line-height: 1.2;
}

#examples .cases-grid > article:not(.case-card) {
  display: none;
}