.figure {
  display: flex;
  flex-direction: column;
  color: var(--white-color);
}

.figure--no-background {
  color: var(--primary-color);
}

.figure--primary-background {
  background-color: var(--primary-color);
}

.figure--secondary-background {
  opacity: 0;
  animation: fade-in var(--transition-normal-duration) ease calc(var(--transition-duration-7) + 1s) forwards 1;
  background-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .figure {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    height: var(--height-80);
  }
}

@media only screen and (min-width: 1200px) {
  .figure {
    height: var(--full-height);
  }
}

.figure__image {
  width: var(--width-100);
  height: var(--half-height);
  object-fit: cover;
  object-position: 50% 50%;
}

.figure__image--contain {
  object-fit: scale-down;
  background-color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .figure__image {
    min-width: var(--width-50);
    height: inherit;
  }
}

.figure__caption {
  padding: var(--spacing-4) var(--spacing-1);
  align-self: center;
}

@media only screen and  (min-width: 1200px) {
  .figure__caption {
    padding: var(--spacing-3);
  }
}