.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 3px;
  transition: all 0.2s;
  overflow: hidden;

  &__image {
    >img {
      width: 100%;
      object-fit: cover;
      border-bottom: 1px solid #ccc;
    }
  }

  &__info {
    flex-grow: 1;
    padding: 16px 16px 32px;

    >header {
      display: flex;
      align-items: center;

      .title {
        flex-grow: 1;

        .product-name {
          padding-right: 12px;
          font-size: 1.125rem;
          font-weight: 500;
          text-transform: uppercase;
          margin-bottom: 4px;
        }

        .product-short-desc {
          color: #777;
        }
      }

      .product-price {
        font-size: 1.375rem;
        font-weight: 600;
      }
    }
  }

  &__cta {
    >button {
      height: 48px;
      width: 100%;
      border: none;
      background-color: #fff;
      border-top: 1px solid #ccc;
      cursor: pointer;
      transition: background-color 0.2s;
    }
  }
}

@media screen and (min-width: 1024px) {
  .product-card {
    &:hover {
      transform: scale(1.0125);
    }
  }
}
