www/src/layouts/partials/package-thumbnail.html

<div class="card card-thumbnail" style="width: 100%">
  <img src="/Images/package-thumb-1.jpg" class="card-img-top" alt="..." style="width:100%; height:100%;">
  <div class="card-body thumbnail-body">
    <p class="card-text">V2.35 >45 installs</p>
    {{- partial "detail-btn.html" . -}}
  </div>
  <div class="card-body thumbnail-body-mobile">
    <button href="#" class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
  </div>
</div>

<style>

@media only screen and (min-width: 576px) {

  .card-thumbnail{
    background: none;
    border-radius: 0px !important;
    border: 1px solid #949494;
    padding: 1.674vw;
  }

  .thumbnail-body{
    border-radius: 0px !important;
    padding: 0vw;
  }

  .card-img-top{
    border-radius: 0px;
    margin-bottom: 1.674vw;
  }

  .card-text{
    font-size: 0.781vw;
    float:left;
    position: relative;
    top:0.502vw;
  }

  .thumbnail-body-mobile{
    display: none;
  }

}

@media only screen and (max-width: 576px) {

  .card-thumbnail{
    background: none;
    border-radius: 0px !important;
    border: none;
  }

  .thumbnail-body{
    border-radius: 0px !important;
    padding: 0vw;
    display:none;
  }

  .thumbnail-body-mobile{
    background-color: #8000ff;
  }

  .card-img-top{
    border-radius: 0px;
    margin-bottom: 0vw;
  }

  .detail-btn-mobile{
    background:none;
    border:none;
    color: white;
    font-family: "pp-neue-machina", sans-serif;
    font-size: 5vw;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    padding-top: 2vw !important;
  }

  .detail-btn-mobile .icon-enter-arrow{
    display: inline-block;
    position: relaitve;
    margin-right: 2vw;
    transition: 0.2s ease-in-out;
  }

  .detail-btn-mobile:hover .icon-enter-arrow{
    display: inline-block;
    transform: rotate(-45deg) !important;
  }

}

</style>