<div class="container">
  <div class="mb-5 row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Blog</h3>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2022/10/hacktoberfest-2022"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">Hacktoberfest 2022</div>
                  <div class="d-flex text-muted">2022-10-01</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2022/08/500-stars-on-github"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">500 Stars on GitHub</div>
                  <div class="d-flex text-muted">2022-08-18</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">
                    Ghostfolio meets Internet Identity
                  </div>
                  <div class="d-flex text-muted">2022-07-23</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">
                    How do I get my finances in order?
                  </div>
                  <div class="d-flex text-muted">2022-07-14</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2022/01/ghostfolio-first-months-in-open-source"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">
                    First months in Open Source
                  </div>
                  <div class="d-flex text-muted">2022-01-05</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../en/blog/2021/07/hello-ghostfolio"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
                  <div class="d-flex text-muted">2021-07-31</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="container p-0">
            <div class="flex-nowrap no-gutters row">
              <a
                class="d-flex w-100"
                href="../de/blog/2021/07/hallo-ghostfolio"
              >
                <div class="flex-grow-1">
                  <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
                  <div class="d-flex text-muted">2021-07-31</div>
                </div>
                <div class="align-items-center d-flex">
                  <ion-icon
                    class="chevron text-muted"
                    name="chevron-forward-outline"
                    size="small"
                  ></ion-icon>
                </div>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>