:root{
  --c-skip-link--color: var(--color-primary);
  --c-skip-link--color-hover: var(--color-on-primary);
  --c-skip-link--bg: transparent;
  --c-skip-link--border-radius: var(--radius-round);
  --c-skip-link--border-color: var(--color-primary);
  --c-skip-link--border-size: 1px;
  --c-skip-link--icon-size: 2rem;
  --c-skip-link--size: 3rem;
  --c-skip-link--padding: .5rem;
  --c-skip-link--margin: 0 auto;
}

.c-skip-link{
  margin: var(--c-skip-link--margin);
}

.c-skip-link--link{
  --text-color: currentColor;
  display: grid;
  place-content: center;
  width: var(--c-skip-link--size);
  height: var(--c-skip-link--size);
  border-radius: var(--c-skip-link--border-radius);
  border: var(--c-skip-link--border-size) solid var(--c-skip-link--border-color);
  background-color: var(--c-skip-link--bg);
  color: var(--c-skip-link--color);
  padding: var(--c-skip-link--padding);
  transition: all 300ms ease-in-out;
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*z-index: 1000;*/

  @media (min-width: 768px ){
    --c-skip-link--icon-size: 4rem;
    --c-skip-link--size: 5rem;
  }

  & :is(svg, img){
    width: var(--c-skip-link--icon-size);
    height: var(--c-skip-link--icon-size);
  }

  &:hover{
    color: var(--c-skip-link--color-hover);
    background-color: var(--c-skip-link--color);
  }
}