---
// Properties
const {
    Title,
    Description,
    Link
} = Astro.props
---

<div class="fade-up">
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
    <div class="search-result-web-skeleton"></div>
</div>

<style lang="scss">
@keyframes wave-lines {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes wave-squares {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.fade-up {
  mask-image: linear-gradient(white, transparent);
}
.search-result-web-skeleton {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: white;
    margin-bottom: 12px;
    border-radius: 6px;
    padding: 64px 12px;
    box-shadow: 0px 4px 10px 0px #0000000a;
    background: linear-gradient(to right,rgba(164, 164, 164, 0.2) 8%,rgba(241, 238, 238, 0.3) 18%,rgba(155, 155, 155, 0.2) 33%);
    background-size: 1500px 1px;
    animation: wave-lines 0.8s infinite ease-out;
}
</style>