/**
 * EdGEL Figures with captions
 */

@use "../settings" as *;
@use "../tools" as *;

.figure-landscape,
.figure-portrait {
  .figure-img {
    width: 100%;
  }
}

.figure-landscape {
  width: 100%;

  @include media-breakpoint-up("xl") {
    float: right;
    width: percentage(5 / 12);
    margin-left: $grid-gutter-width / 2;
    clear: right;
  }
}

.figure-portrait {
  float: right;
  width: percentage(3 / 12);
  margin-left: $grid-gutter-width / 2;
  clear: right;
}

.figure {
  background-color: $card-bg;
  @include edgel-shadow();
}

.figure-img {
  @include edgel-shadow();
}

.figure-caption {
  padding: 0 $card-spacer-x $card-spacer-y;
}
