<style media="screen">
  .title-product-summary{
    margin-bottom: 3%;
  }
  .description-product-summary{
    margin-top: 2%;
  }

  .product-image-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

 .product-image-custom img {
  width: 100%;
  height: 270px;
  overflow: hidden;
  }
</style>

<a href="{{ .Permalink }}" class="transform hover:-translate-y-1 hover:shadow-md duration-500">
    <div class="summary border p-3 border-green-custom">
        <h2 class="text-3xl title-product-summary text-white-custom">
            {{ .Title }}
        </h2>
        <div class="product-image-custom">
          <img src="{{ .Params.image | relURL }}" alt="-product-image-">
        </div>
        <p class="description-product-summary text-white-custom">{{ .Description }}</p>
    </div>
</a>
