/**
 * EdGEL Figures with captions
 */

@use "sass:math";

@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(math.div(5, 12));
    margin-left: $grid-gutter-width * .5;
    clear: right;
  }
}

.figure-portrait {
  float: right;
  width: percentage(math.div(3, 12));
  margin-left: $grid-gutter-width * .5;
  clear: right;
}

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

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

.figure-caption {
  padding: 0 $card-spacer-x ($spacer * .5);
}