:root {
  --steel-clr-primary: #4d4a3f;
  --steel-clr-primary-hover: #3e3b32;
  --steel-clr-heading: #555962;
  --steel-clr-text: #1f1f1f;
  --steel-clr-muted: #6d6759;
  --steel-clr-border: #e3e3e3;

  --steel-font-size-body: 18px;
  --steel-line-height-body: 1.65;
  --steel-font-size-heading-card: 26px;

  --steel-radius-button: 4px;
}

/* TYPOGRAPHY */
.steel-sizes-card__description p {
  font-size: var(--steel-font-size-body);
  line-height: var(--steel-line-height-body);
}

.steel-sizes-card__description {
  color: var(--steel-clr-text);
  max-width: 68ch;
}

.steel-sizes-card__title {
  color: var(--steel-clr-heading);
  line-height: 1.2;
  font-size: var(--steel-font-size-heading-card);
}

.steel-sizes-card__eyebrow {
  font-size: 14px;
  color: var(--steel-clr-muted);
}

/* BUTTONS */
.steel-sizes-card__button,
.steel-building-sizes-index__row-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 12px 20px !important;

  border: 0 !important;
  border-radius: var(--steel-radius-button) !important;

  background: var(--steel-clr-primary) !important;
  color: #fff !important;

  font-size: 17px !important;
  font-weight: 700 !important;

  text-decoration: none !important;
  cursor: pointer;

  transition: background 0.2s ease;
}

.steel-sizes-card__button:hover,
.steel-building-sizes-index__row-button:hover {
  background: var(--steel-clr-primary-hover) !important;
}

/* FORM BUTTON */
.steel-building-size__form input[type="submit"],
.steel-building-size__form .gform_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 12px 24px !important;

  border: 0 !important;
  border-radius: var(--steel-radius-button) !important;

  background: var(--steel-clr-primary) !important;
  color: #fff !important;

  font-size: 17px !important;
  font-weight: 700 !important;
}

/* BREADCRUMBS */
.steel-building-size__breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
}

.steel-building-size__breadcrumbs-list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steel-building-size__breadcrumbs-item:not(:last-child)::after {
  content: "/";
}

/* EMPTY STATES */
.steel-building-sizes-index__empty,
.steel-building-size__empty-gallery {
  padding: 24px;
  border: 1px solid var(--steel-clr-border);
  background: #f8f8f8;
}