.figure {
  display: table;
}
.figure:not(:last-child) {
  margin-bottom: var(--size-4);
}
@media (min-width: 580px) {
  .figure.u-align-left {
    margin-right: var(--size-8);
    max-width: calc(50% - var(--size-4));
  }
}
@media (min-width: 580px) {
  .figure.u-align-right {
    margin-left: var(--size-8);
    max-width: calc(50% - var(--size-4));
  }
}

.figure__caption {
  caption-side: bottom;
  display: table-caption;
  font-family: var(--font-sans);
  font-size: var(--font-size-00);
  font-weight: var(--font-weight-700);
  line-height: var(--font-lineheight-2);
  margin-top: var(--size-2);
}

.figure--center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--size-4);
}

@media (min-width: 580px) {
  .figure--left {
    float: left;
    margin-right: var(--layout-gutter);
    max-width: calc(50% - var(--size-4));
  }
}

@media (min-width: 580px) {
  .figure--right {
    float: right;
    margin-left: var(--layout-gutter);
    max-width: calc(50% - var(--size-4));
  }
}

.figure__media img {
  max-width: 100%;
  height: auto;
}

.figure--video {
  display: block;
  width: 100%;
}
.figure--video .figure__caption {
  display: block;
}