@import '~Breakpoints';
@import '~Colors';
@import '~FontSize';
@import '~Layout';

.content {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     flex-start;
}

$gutter: 2.5%;
.item {
  flex-basis: auto;
  width: 100%;
  margin-top: 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  @include media-breakpoint-up(xl) {
    width: calc((100% - #{$gutter * 2}) / 3);
    &:nth-child(3n + 2), &:nth-child(3n + 3) {
      margin-left: $gutter;
    }

  }
}

.figure {
  //height:     20rem;
  max-height: 25rem;
  width:      100%;
  object-fit: cover;
  margin:     0 auto;
  display:    block;
  @include media-breakpoint-up(md) {
    max-height: 35rem;
  }
}

.title {
  //position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  padding:          2rem;
  letter-spacing:   .2rem;
  font-weight:      300;
  color:            $brand-primary;
  font-family:      $font-family-serif;
  @include fontSizer(2.8, 2.2);
  background-color: rgba(255, 255, 255, .75);
}

$stepOne: transparentize(#8d8581, .05);
$stepTwo: transparentize(#7b736f, .05);
$stepThree: transparentize(#796e68, .05);
$stepList: $stepOne 33.333%, $stepTwo 33.334%, $stepTwo 66.666%, $stepThree 66.667%;
.details {
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            100%;
  display:          flex;
  justify-content:  space-between;
  color:            white;
  letter-spacing:   .2rem;
  font-weight:      300;
  text-align:       center;
  align-items:      baseline;
  background-image: linear-gradient(to right, $stepList);
}

.beds, .baths, .price {
  width:         33.333%;
  margin-bottom: 0;
  padding:       1rem;
  height:        100%;
  i {

    margin-right: .5rem;
  }
}

.baths, .beds {
  @include fontSizer(1.8, 1.6)
}

.price {
  //background-color: transparentize(#796e68, .05);
  font-family:    $font-family-serif;
  font-weight:    700;
  @include fontSizer(2.2, 1.6);
  letter-spacing: .3rem;
}

.link {
  display: block;
  margin:  3rem auto;
}