@import "template.scss";

.container {
  aspect-ratio: 1/1;
  background-color: $placeholder-bg;
  background-position: center;
  background-size: cover;
  box-shadow: $shadow;
  cursor: pointer;
  overflow: hidden;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  position: relative;
}

.title {
  background-color: rgba($white, 0.91);
  text-align: center;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: $base-color;
  padding: 10px 0;
  transition: padding 0.3s ease-out;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.container:hover .title {
  padding: 30px 0 70px 0;
}