.figure {
  display: table;
  margin-bottom: var(--size-6);
  margin-top: 0;
  display: table;
}
.figure > .figure__media .figure {
  margin-bottom: var(--size-2);
}
@media (min-width: 576px) {
  .figure.u-align-center {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--size-4);
    text-align: center;
  }
}
@media (min-width: 576px) {
  .figure.u-align-left {
    float: left;
    margin-right: var(--size-8);
    max-width: calc(50% - var(--size-4));
  }
}
@media (min-width: 576px) {
  .figure.u-align-right {
    float: right;
    margin-left: var(--size-8);
    max-width: calc(50% - var(--size-4));
  }
}
.figure.has-border img, .figure.figure--with-border img {
  border: 1px solid var(--color-black);
}

.figure__caption {
  display: table-caption;
  caption-side: bottom;
  line-height: var(--line-xs);
  margin-top: 0.25rem;
  font-style: italic;
  font-size: var(--scale-00);
}

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

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

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

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