.gr-kat-wrap { margin: 0; }
.gr-kat-title { font-size: 40px; font-weight: 700; margin-bottom: 24px; text-align: left; }
.gr-kat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px;
align-items: start;
}
.gr-kat-item { text-align: center; } .gr-kat-link {
display: inline-block;
text-decoration: none;
color: inherit;
}
.gr-kat-link:hover,
.gr-kat-link:focus-visible {
color: inherit;
text-decoration: none;
} .gr-kat-figure {
margin: 0 auto 16px;
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
background: #e9f4f7;
display: grid;
place-items: center;
} .gr-kat-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform .25s ease;
}
.gr-kat-link:hover .gr-kat-img,
.gr-kat-link:focus-visible .gr-kat-img {
transform: scale(1.05);
} .gr-kat-name {
margin-top: 12px;
font-size: 18px;
line-height: 1.4;
font-weight: 400;
text-align: center;
color: #1a1a1a;
}
.gr-kat-link:hover .gr-kat-name,
.gr-kat-link:focus-visible .gr-kat-name {
color: #1a1a1a;
} @media (min-width: 769px) and (max-width: 1024px) {
.gr-kat-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 20px;
padding-left: 24px; }
.gr-kat-figure { width: 140px; height: 140px; }
.gr-kat-name { font-size: 16px; }
.gr-kat-title { font-size: 30px; padding-left: 24px; } } @media (max-width: 768px) {
.gr-kat-grid {
display: flex;
overflow-x: auto;
gap: 16px;
padding-left: 12px;
padding-right: 16px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
mask-image: linear-gradient(to right, black 0, black calc(100% - 0px), transparent 100%);
}
.gr-kat-grid::-webkit-scrollbar { height: 0; }
.gr-kat-item {
flex: 0 0 140px;
text-align: center;
}
.gr-kat-name { font-size: 16px; }
.gr-kat-figure { width: 120px; height: 120px; }
.gr-kat-title {
padding-left: 24px;
font-size: 30px;
}
}.gr-author-icons{
display:flex;
gap:6px;
align-items:center;
} .gr-author-icons .gr-fi{
all:unset;
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:8px;
background-color:#e85b6b;
color:#fff;
cursor:pointer;
text-decoration:none;
line-height:0;
box-sizing:border-box;
} .gr-author-icons .gr-fi:link,
.gr-author-icons .gr-fi:visited,
.gr-author-icons .gr-fi:hover,
.gr-author-icons .gr-fi:active,
.gr-author-icons .gr-fi:focus,
.gr-author-icons .gr-fi:focus-visible{
background-color:#e85b6b !important;
color:#fff !important;
text-decoration:none !important;
box-shadow:none !important;
outline:none;
} .gr-author-icons .gr-fi:focus-visible{
outline:2px solid rgba(0,0,0,.25) !important;
outline-offset:2px;
} .gr-author-icons .gr-fi i{
color:inherit !important;
font-size: 20px; width:1em;
height:1em;
display:block;
text-align:center;
pointer-events:none;
} .gr-author-icons .gr-fi .fa-link{
transform: translate(-2px, 1px) rotate(-20deg);
} .gr-author-icons .gr-fi:hover{ filter:brightness(.95) } .gr-author-icons .gr-fi-copy.copied{ opacity:.75 } .gr-author-icons .gr-fi[data-tooltip]{ position:relative }
.gr-author-icons .gr-fi[data-tooltip]::after{
content:attr(data-tooltip);
position:absolute;
bottom:calc(100% + 6px);
left:50%;
transform:translateX(-50%) translateY(4px);
background:#1f2937;
color:#fff;
padding:5px 7px;
border-radius:6px;
font-size:12px;
line-height:1;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
z-index:5;
}
.gr-author-icons .gr-fi[data-tooltip]::before{
content:"";
position:absolute;
bottom:100%;
left:50%;
transform:translateX(-50%);
border:5px solid transparent;
border-top-color:#1f2937;
opacity:0;
transition:opacity .18s ease;
z-index:5;
}
.gr-author-icons .gr-fi.is-tooltip::after,
.gr-author-icons .gr-fi.is-tooltip::before{
opacity:1;
transform:translateX(-50%) translateY(0);
} @media (prefers-color-scheme: dark){
.gr-author-icons .gr-fi:focus-visible{
outline-color:rgba(255,255,255,.35) !important;
}
} button.gr-fi{ appearance:none; -webkit-appearance:none }