.bento {
  $self: &;
  &:hover {
    img {
      transform: scale(1.1);
    }
  }
  // block
  &__link {
  }
  &__container {
  }
  &__image-holder {
    position: relative;
    overflow: hidden;
    picture {
      img {
        transition: all 0.3s ease-in-out;
        width: 100%;
      }
    }
  }
  &__info {
    position: absolute;
    width: 100%;
    top: 0;
    box-sizing: border-box;
    padding: 24px 15px;
    text-align: center;
    color: #000;
    @include media-breakpoint-up(sm) {
      padding: 17px 15px;
    }
    // block
    &-title {
      line-height: 0.8;
      margin: 0px 0 10px 0;
      font-size: 28px;
    }
    &-desc {
      font-size: 18px;
    }
    // modifier
    &--white {
      color: #fff;
    }
  }
  &--available {
    #{$self}__info {
      padding: 10px 12px;

      @include media-breakpoint-up(sm) {
        padding: 18px 13px;
      }
      &-title {
        font-size: 22px;
        color: $pitch-black;
      }
      &-brand {
        font-size: 16px;
        line-height: 1;
        margin: 16px 0 0;
        color: $pitch-black;
      }
      &-prize {
        font-size: 24px;
        line-height: 1;
        color: $pitch-black;
        font-weight: 600;
        margin-top: 6px;
      }
    }
  }
  &--contact-us {
    #{$self}__info {
      padding: 25px 15px 20px 15px;
      @include media-breakpoint-up(sm) {
        padding: 21px 15px 20px 15px;
      }
      &-title {
        font-size: 32px;

        @include media-breakpoint-up(sm) {
          font-size: 28px;
        }
      }
      &-desc {
        line-height: 1;
        font-size: 18px;
        margin-top: 11px;
        @include media-breakpoint-up(sm) {
          font-size: 18px;
        }
      }
    }
  }
  &--community {
    #{$self}__info {
      color: #fff;
      padding: 20px 10px;

      &-desc {
        line-height: 0.8;
        margin: 10px 0 0;
        font-size: 16px;
      }

      .btn {
        margin-top: 30px;
        width: 175px;
        background-color: #b10c1c;
        color: #fff;
        -webkit-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.9);
        -moz-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.9);
        box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.9);
        font-weight: 300;
      }
    }
  }
}
