a.dienst.archive
{
  border-radius: 2em;
  padding: 1em;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  text-decoration: none;
  height: clamp(15em, 35dvh, 400px);
  transition: all 250ms ease-in-out;

  div.image-wrapper
  {
    position: absolute;
    background: var(--splash-color-4);
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;

    img
    {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  div.content-wrapper
  {
    position: relative;
    z-index: 2;

    h3
    {
      max-width: 25ch;

      color: white;
    }

    p
    {
      display: inline-block;
      font-weight: 600;
      padding: 1em 1.5em .45em 1.5em;
      background: rgba(255,255,255,.67);
      color: var(--splash-color-1);
      backdrop-filter: blur(.5em);
      clip-path: polygon(0 0, 5% 15%, 95% 15%, 100% 30%, 100% 100%, 0 100%);
    }
  }
}

a.dienst.archive:hover
{
  div.content-wrapper
  {
    p
    {
      background: rgba(255,255,255,1);
    }
  }
}

div.project
{
  position: relative;
  display: grid;
  grid-template-rows: 3fr 2fr;
  grid-gap: 2em;
  transition: all 250ms ease-in-out;

  div.image-wrapper
  {
    position: relative;
    overflow: hidden;
    background: var(--splash-color-4);
  }

  div.content-wrapper
  {
    > a
    {
      img
      {
        height: 1.5em;
        width: auto;
      }
    }

    p.post-date
    {
      margin-block-end: 0px;
      font-size: .75em;
    }

    h3
    {
      font-size: var(--h4-size);

      a
      {
        color: var(--splash-color-1);
        transition: all 250ms ease-in-out;
        text-decoration: none;
      }

      a:hover
      {
        color: var(--splash-color-2);
      }
    }
  }
}