.avatar{border-radius:50%;overflow:hidden}.avatar__image{left:50%;max-width:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.avatar__image--pixel{height:auto;width:auto}.avatar-link{color:inherit;display:block;position:relative}.avatar-link>*{position:relative;z-index:2}.avatar-link:after{background-color:var(--kh-colour--white);border:1px solid transparent;border-radius:50%;content:"";display:block;height:calc(100% + var(--kh-spacing--xs) + 1px);left:50%;opacity:.3;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .2s ease;width:calc(100% + var(--kh-spacing--xs) + 1px)}.avatar-link:focus:after,.avatar-link:hover:after{border:1px solid var(--kh-colour--gold);opacity:1}.avatar--extra-large{height:calc(var(--kh-spacing--lg)*2.5);width:calc(var(--kh-spacing--lg)*2.5)}.avatar--large{height:var(--kh-spacing--xl);width:var(--kh-spacing--xl)}@media screen and (min-width:1600px){.avatar--large{height:calc(var(--kh-spacing--xl) + var(--kh-spacing--md));width:calc(var(--kh-spacing--xl) + var(--kh-spacing--md))}}.avatar--medium{height:var(--kh-spacing--lg);width:var(--kh-spacing--lg)}@media screen and (min-width:1600px){.avatar--medium{height:calc(var(--kh-spacing--lg) + var(--kh-spacing--sm));width:calc(var(--kh-spacing--lg) + var(--kh-spacing--sm))}}.avatar--border-thick{border:var(--kh-spacing--xxs) solid var(--kh-colour--gold)}.avatar--small{height:var(--kh-spacing--lg);width:var(--kh-spacing--lg)}@media screen and (min-width:1600px){.avatar--small{height:calc(var(--kh-spacing--lg) + var(--kh-spacing--sm));width:calc(var(--kh-spacing--lg) + var(--kh-spacing--sm))}}