/* Utils for adding Padding and Margin */
@import "flex/flex";

.match-height {
	@include flexbox;
	@include align-items(stretch);
}
.match-height.center {
	@include align-items(center);
}
.match-height .image {
  background-size: cover;
  background-position: 50%;
}
.match-height .image.top {
  background-position-y: top;
}
.match-height .image.bottom {
  background-position-y: bottom;
}
.match-height .image.left {
  background-position-x: left;
}
.match-height .image.right {
  background-position-x: right;
}
.match-height .image hr.x-gap {
  padding-bottom: 80%;

  padding-bottom: calc( 100% - 50px );
}

@media (max-width: 767px) {
  .match-height {
    display: block;
  }
  .match-height .image {
    padding-bottom: 50% !important;
  }
}