.ct-soc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; --ct-soc-s: 34px; }
.ct-soc--default { --ct-soc-s: 42px; }
.ct-soc--large { --ct-soc-s: 52px; }
.ct-soc__l { margin-right: 4px; font-weight: 500; }
.ct-soc__a { display: inline-flex; align-items: center; justify-content: center; width: var(--ct-soc-s); height: var(--ct-soc-s); color: var(--ct-link); transition: background-color .2s, color .2s, transform .2s; }
.ct-soc__a svg { width: 50%; height: 50%; fill: currentColor; }
.ct-soc__a:hover { transform: translateY(-2px); }
.ct-soc--circle .ct-soc__a { border-radius: 50%; background: rgba(0, 0, 0, .08); }
.ct-soc--square .ct-soc__a { border-radius: 4px; background: rgba(0, 0, 0, .08); }
.ct-soc--light .ct-soc__a, .ct-soc--light .ct-soc__l { color: #fff; }
.ct-soc--light.ct-soc--circle .ct-soc__a, .ct-soc--light.ct-soc--square .ct-soc__a { background: rgba(255, 255, 255, .16); }
.ct-soc--light .ct-soc__a:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.ct-soc--primary .ct-soc__a { color: var(--ct-primary); }
.ct-soc--dark .ct-soc__a:hover { color: var(--ct-primary); }