.link-box {
  --link-box-radius: var(--radius-xl);

  --link-box-gap: var(--gap-sm);
  --link-box-padding-y: var(--padding-xxs);
  --link-box-padding-x: var(--padding-2xs);
  --link-box-flow: var(--gap-xl);

  @media (min-width: 768px) {
    --link-box-gap: var(--gap-md);
    --link-box-radius: var(--radius-2xl);
    --link-box-padding-x: var(--padding-2sm);
  }

  background-color: var(--element-bg);
  color: var(--element-text);
  border-radius: var(--link-box-radius);
  display: flex;
  gap: var(--link-box-gap);
  padding: var(--link-box-padding-y) var(--link-box-padding-x);
  border: var(--border-xs) solid var(--element-text);
  transition: var(--button-transition);
  margin-bottom: var(--link-box-flow);
  text-decoration: none;
  position: relative;
  cursor: pointer;

  &::after {
    content: "";
    position: absolute;
    top: var(--hover-shadow-y);
    left: var(--hover-shadow-x);
    right: calc(-1 * var(--hover-shadow-x));
    bottom: calc(-1 * var(--hover-shadow-y));
    border-radius: inherit;
    background-color: transparent;
    pointer-events: none;
    transition: var(--button-transition);
    z-index: -1;

    @media (forced-colors: active) {
      content: none;
    }
  }

  &:hover::after {
    background-color: var(--shadow-neutral);
  }

  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;

    /* Mobile */
    @media (min-width: 768px) {
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
  }

  svg {
    flex-shrink: 0;
    width: var(--size-8);
    height: var(--size-8);
  }

  &:focus-visible {
    box-shadow: none;
    outline: 4px solid var(--border-neutral);
    outline-offset: 0px;
  }

  @media (min-width: 768px) {
    --link-box-padding-y: var(--padding-xs);
  }
}