
<div class="beam">
  <img class="skalaBeam" src="/images/sanierungsfahrplan/skalaEnergieEffizienz.svg" alt="Skala Energieeffizienz"/>
</div>

<div class="wrapper">
    <!-- Wände -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWaende.svg" alt="Hausiconwände"/>
      <div class="card-subtitle">*inklusive Kellerwänden</div>
    </div>
    <!-- Dach -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconDach.svg" alt="Hausicondach"/>
      <div class="card-subtitle">inklusive Kellerwänden</div>
    </div>
    <!-- Lüftung -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconLueftung.svg" alt="Hausiconlüftung"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Fenster -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconFenster.svg" alt="Hausiconfenster"/>
      <div class="card-subtitle">inklusive Dachfenster</div>
    </div>
    <!-- Ihr Haus heute -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHaus.svg" alt="Hausicon"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Warmwasser -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasser.svg" alt="Hausiconwarmwasser"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Boden -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconBoden.svg" alt="Hausiconboden"/>
      <div class="card-subtitle">unterer Gebäudeabschluss</div>
    </div>
    <!-- Heizung -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHeizung.svg" alt="Hausiconheizung"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Warmwasserverteilung -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasserVerteilung.svg" alt="Hausiconwarmwasserverteilung"/>
      <div class="card-subtitle">inkl. Speicherung und Übergabe</div>
    </div>
    <div class="card">
    </div>
  </div>

<style lang="scss">

.beam {
  @apply items-center justify-center p-12 m-6;
}  
  
.skalaBeam {
  @apply w-full;}


.wrapper {
  @apply grid grid-cols-3 gap-6 items-center justify-center px-10 m-6 py-10;
}

.card {
  @apply bg-white flex flex-col items-center 
  justify-center text-center;
}

.card-subtitle {
  @apply w-full text-sm text-gray-600 h-5;
}

.hausIcon {
  @apply w-full;}


</style>