<script lang="ts">
  import { t } from '$lib/translations';
    import type { IPost } from "$type/post";
    import Card from "../../card/Card.svelte";

    export let posts: IPost[];
</script>
{#if !!posts.length}
  <div class="related__posts">
    <div class="container">
      <h2 class="related__posts-title">{$t('webinars.Looking for more useful content?')}</h2>
      <div class="related__posts-list">
        {#each posts as post}
          <div class="related__posts-item">
            <Card data={post} />
          </div>
        {/each}
      </div>
    </div>
  </div>
{/if}
<style lang="scss">
  @import '/src/scss/media';
  @import '/src/scss/mixins';
  @import '/src/scss/variables';

  .related {
    &__posts-title {
      @include titleL;

      margin-bottom: 64px;

      @include breakpoint-down('deskL') {
        margin-bottom: 40px;
      }

      @include breakpoint-down('deskS') {
        text-align: center;
        margin-bottom: 64px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 40px;
      }
    }

    &__posts-list {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;

      @include breakpoint-down('deskL') {
        gap: 32px;
      }

      @include breakpoint-down('deskS') {
        gap: 40px;
        max-width: 335px;
        margin-inline: auto;
      }
    }

    &__posts-item {
      width: calc((100% - 40px * 2) / 3);

      @include breakpoint-down('deskL') {
        width: calc((100% - 32px * 2) / 3);
      }

      @include breakpoint-down('deskS') {
        width: 100%;
      }
    }
  }
</style>