@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

$title-height: 3rem;

.container {
  @include border-radius;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;

  &:hover {
    .description {
      height: calc(100% - #{$title-height});
    }
  }
}

.title {
  //height: $title-height;
  //line-height: $title-height;
  background-color: rgba(#000, 0.5);
  padding: .5rem 1rem;
  color: #fff;
  font: {
    weight: bold;
  }
  display: flex;
  align-items: center;
}

.description {
  @include transition;
  height: 0;
  color: #fff;
  padding: 0 1rem;
  background-color: rgba(#000, 0.5);
}