/* Crysten Curry Elementor Widget - Tonal Study (fonts come from fonts.css) */

.cc-tonal-wrap {
  --cc-t-bg: #FFFFFF;
  --cc-t-pad: clamp(64px, 7vw, 110px);
  --cc-t-maxw: 1680px;
  --cc-t-gutter: clamp(20px, 3.2vw, 56px);
  --cc-t-cap: #1B1A1A;
  --cc-t-gap: 0px;
  width: 100%;
  box-sizing: border-box;
}
.cc-tonal-wrap *, .cc-tonal-wrap *::before, .cc-tonal-wrap *::after { box-sizing: border-box; }

.cc-tonal { background: var(--cc-t-bg); padding-block: var(--cc-t-pad); }
.cc-tonal__wrap { width: 100%; max-width: var(--cc-t-maxw); margin: 0 auto; padding-inline: var(--cc-t-gutter); }

.cc-tonal__cap {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.cc-tonal .cc-mono {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--cc-t-cap);
}

.cc-tonal__row { display: grid; gap: var(--cc-t-gap); }
.cc-tonal__cell { aspect-ratio: 1; overflow: hidden; background: transparent; }
.cc-tonal__cell img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

@media (max-width: 720px) {
  .cc-tonal__row { grid-template-columns: repeat(4, 1fr) !important; }
  .cc-tonal__row .cc-tonal__cell:nth-child(n+5) { display: none; }
}