/* Case studies: a single editorial system, with the company name as the shared visual measure. */
.case {
  min-height: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  padding: 34px 36px;
}

.case-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}

.case .case-company {
  width: 180px;
  height: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  border-top: 1px solid currentColor;
  padding-top: 11px;
}

.case-company-name {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: 1;
}

.case-lalamove .case-company-name { color: #f15a24; }
.case-base .case-company-name { color: #0879d1; }
.case-base .case-company-name > span { font-size: 13px; letter-spacing: -.03em; }
.case-topdev .case-company-name { color: #434343; }
.case-topdev .case-company-name > span { color: #e54b40; }

.case .case-content { max-width: 680px; }
.case .case-kicker { margin-bottom: 15px; }
.case .case-content h3 { margin-bottom: 14px; }
.case .case-content > p:not(.case-kicker) { margin-bottom: 0; }
.case .case-content ul { border-top: 1px solid currentColor; padding-top: 18px; }
.case .case-mark { display: none; }

@media (max-width: 800px) {
  .case { grid-template-columns: 45px minmax(0, 1fr); padding: 26px 22px; }
  .case-body { grid-template-columns: 1fr; gap: 27px; }
  .case .case-company { width: 100%; max-width: none; }
}