.c-tblink {
  display        : block;
  position       : relative;
  text-decoration: none;
}

.c-tblink::before {
  display         : block;
  content         : "";
  background-color: var(--univ-primary);
  transition      : width 0.3s;
  width           : var(--border-cut-length);
  height          : var(--border-strong);
  margin          : var(--margin-lg) 0;
}

.c-tblink:hover::before {
  transition: width 0.3s;
  width     : 50%;
}

.c-tblink-title {
  font-size  : var(--font-size-xl);
  font-family: var(--font-title);
  font-weight: var(--font-weight-black);
  color      : var(--main-fg);
  padding    : var(--margin-xs);
  height     : calc(3lh + var(--margin-xs) * 2);
  overflow   : clip;

  border-radius: var(--rounding-sm) var(--rounding-sm) 0 0;
  border       : var(--border-thin) solid var(--main-fg);
  border-bottom: none;
}

.c-tblink-banner {
  background-color: var(--gray-mid);
  width           : 100%;
  height          : 4lh;
  overflow        : clip;

  border-radius: 0 0 var(--rounding-sm) var(--rounding-sm);
  border       : var(--border-thin) solid var(--main-fg);
  border-top   : none;
}

.c-tblink-banner>img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: 50% 50%;
}