<template>
  <div class="basic-knowledge-overview">
    <div class="basic-knowledge-overview__heading">
      <h1 class="basic-knowledge-overview__title">
        Basiswissen:<br> Sprache und Gesellschaft
      </h1>
    </div>
    <div class="basic-knowledge-overview__list">
      <basic-knowledge-teaser></basic-knowledge-teaser>
      <basic-knowledge-teaser></basic-knowledge-teaser>
      <basic-knowledge-teaser></basic-knowledge-teaser>
    </div>
  </div>
</template>

<script>
  import BasicKnowledgeTeaser from '@/components/BasicKnowledgeTeaser';

  export default {
    components: {
      BasicKnowledgeTeaser
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .basic-knowledge-overview {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    width: 100%;

    &__heading {
      padding: 2*$large-spacing 0;
      background-color: $color-accent-2;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    &__title {
      max-width: 1200px;
      line-height: 1.2;
    }

    &__list {
      padding: $large-spacing 0;
      max-width: 1200px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      grid-column-gap: $large-spacing;
      grid-row-gap: $large-spacing;
    }
  }
</style>
