.thumb-container {
  width: 100%;
  min-width: 200px;
  height: 200px;
  border-radius: 24px;
}

:host[size="small"] {
  grid-column: span 2;
  justify-content: start;
}

:host {




  > a {
    &:hover {
      background: var(--theme-color-secondary-container)
    }

    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;

    border-radius: 24px;

    transition: border-radius .3s cubic-bezier(.2,0,0,1),background-color .3s cubic-bezier(.2,0,0,1);


    background: var(--theme-color-surface-1);

    cursor: pointer;

    &:focus {
      outline: 2px solid var(--theme-color-on-surface);
      border-radius: 48px;
    }
  }
}

.content-container {
  margin: 24px;
  display: grid;
  gap: 8px;
}

:host ::ng-deep .title {
  font-size: var(--theme-headline-s-font-size);
  font-weight: var(--theme-headline-s-font-weight);
  letter-spacing: var(--theme-headline-s-letter-spacing);

  transition: font-variation-settings .3s cubic-bezier(.2,0,0,1);
}
