/**
 * @file
 * Visual styles for fields.
 */

.field__label {
  font-weight: bold;
}
.field--label-inline .field__label,
.field--label-inline .field__items {
  float: left; /* LTR */
}
.field--label-inline .field__label,
.field--label-inline > .field__item,
.field--label-inline .field__items {
  padding-right: 0.5em;
}
[dir="rtl"] .field--label-inline .field__label,
[dir="rtl"] .field--label-inline .field__items {
  padding-right: 0;
  padding-left: 0.5em;
}
.field--label-inline .field__label::after {
  content: ":";
}

/* Format the text on Article meta fields */
.article__meta {
  padding-block: var(--spc-sm);
  border-block-style: solid;
  border-block-width: 1px;
  margin-block-end: var(--spc-sm);
}
.article__meta > * {
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

/* Format the text on Article subheader field */
.article__subheader {
  padding-block: var(--spc);
  font-weight: 200;
  font-size: var(--fs-lg);
  border-block-style: solid;
  border-block-width: 1px;
  margin-block: var(--spc);
}

/* Give the Comment section some space */
.article__comment-wrapper {
  margin-block: var(--spc-xlg);
  
}

/* Actually make the Responsive Image usable */

.field--name-field-media-image {
  container: c-media-image / inline-size;
}
.field--name-field-media-image img {
  width: 100cqi;
  height: auto;
}