.lyg-quicklinks {
    --lyg-quicklinks-columns: 4;
    display: grid;
    grid-template-columns: repeat(var(--lyg-quicklinks-columns), minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 20px;
}

.lyg-quicklink {
    --lyg-quicklink-default-bg: transparent;
    --lyg-quicklink-item-bg: var(--lyg-quicklink-default-bg);
    --lyg-quicklink-hover-bg: var(--lyg-quicklink-item-bg);
    --lyg-quicklink-item-hover-bg: var(--lyg-quicklink-hover-bg);
    --lyg-quicklink-hover-move: 4px;
    --lyg-quicklink-gap: 16px;
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--lyg-quicklink-item-bg);
    transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.lyg-quicklink:hover,
.lyg-quicklink:focus-within {
    background: var(--lyg-quicklink-item-hover-bg);
    transform: translateY(calc(var(--lyg-quicklink-hover-move) * -1));
}

.lyg-quicklinks--shapes .lyg-quicklink,
.lyg-quicklinks--shapes .lyg-quicklink:hover,
.lyg-quicklinks--shapes .lyg-quicklink:focus-within {
    background: transparent;
    overflow: visible;
    box-shadow: none !important;
}

.lyg-quicklink__shape {
    --lyg-shape-shadow-x: 0px;
    --lyg-shape-shadow-y: 12px;
    --lyg-shape-shadow-blur: 20px;
    --lyg-shape-shadow-color: rgba(0,0,0,.18);
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--lyg-quicklink-item-bg);
    overflow: visible;
    pointer-events: none;
    transition: color 220ms ease, transform 280ms cubic-bezier(.22,.61,.36,1), filter 220ms ease;
}

.lyg-quicklink__shape path { fill: currentColor; }

.lyg-quicklinks--shape-shadow .lyg-quicklink__shape {
    filter: drop-shadow(var(--lyg-shape-shadow-x) var(--lyg-shape-shadow-y) var(--lyg-shape-shadow-blur) var(--lyg-shape-shadow-color));
    /* Drop-shadow + SVG transform võib Chromiumis animatsiooni ajal rasterkihi serva nähtavale tuua.
       Varjuga variandis liigub terve kaart, mitte filtreeritud SVG eraldi. */
    transform: none;
}

.lyg-quicklink:hover .lyg-quicklink__shape,
.lyg-quicklink:focus-within .lyg-quicklink__shape {
    color: var(--lyg-quicklink-item-hover-bg);
    transform: scale(1.012) rotate(.25deg);
}

.lyg-quicklinks--shape-shadow .lyg-quicklink:hover .lyg-quicklink__shape,
.lyg-quicklinks--shape-shadow .lyg-quicklink:focus-within .lyg-quicklink__shape {
    transform: none;
}

.lyg-quicklink__link {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 24px;
    gap: var(--lyg-quicklink-gap);
    color: inherit;
    text-decoration: none;
}

.lyg-quicklink--horizontal .lyg-quicklink__link { flex-direction: row; align-items: center; }
.lyg-quicklink--horizontal.lyg-quicklink--icon-right .lyg-quicklink__link { flex-direction: row-reverse; }
.lyg-quicklink--vertical .lyg-quicklink__link { flex-direction: column; }

.lyg-quicklink--distribution-center .lyg-quicklink__link { justify-content: center; }
.lyg-quicklink--horizontal.lyg-quicklink--distribution-center .lyg-quicklink__content { flex: 0 1 auto; }
.lyg-quicklink--vertical.lyg-quicklink--distribution-center .lyg-quicklink__link { align-items: center; text-align: center; }
.lyg-quicklink--vertical.lyg-quicklink--distribution-center .lyg-quicklink__content { flex: 0 1 auto; align-items: center; }

.lyg-quicklink--distribution-edges .lyg-quicklink__link { justify-content: space-between; }
.lyg-quicklink--horizontal.lyg-quicklink--distribution-edges .lyg-quicklink__content { flex: 0 1 auto; }
.lyg-quicklink--horizontal.lyg-quicklink--distribution-edges.lyg-quicklink--icon-left .lyg-quicklink__content { text-align: right; align-items: flex-end; }
.lyg-quicklink--horizontal.lyg-quicklink--distribution-edges.lyg-quicklink--icon-right .lyg-quicklink__content { text-align: left; align-items: flex-start; }
.lyg-quicklink--vertical.lyg-quicklink--distribution-edges .lyg-quicklink__link { align-items: stretch; }
.lyg-quicklink--vertical.lyg-quicklink--distribution-edges .lyg-quicklink__media { align-self: center; }
.lyg-quicklink--vertical.lyg-quicklink--distribution-edges .lyg-quicklink__content { flex: 0 1 auto; }

.lyg-quicklink__link:focus-visible { outline: 3px solid currentColor; outline-offset: -4px; }
.lyg-quicklink__media { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lyg-quicklink__image { display: block; width: 64px; max-width: 100%; height: auto; object-fit: contain; transition: transform 220ms ease; }
.lyg-quicklink:hover .lyg-quicklink__image, .lyg-quicklink:focus-within .lyg-quicklink__image { transform: scale(1.04); }
.lyg-quicklink__content { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 4px; }
.lyg-quicklink__title, .lyg-quicklink__subtitle { display: block; min-width: 0; overflow-wrap: anywhere; transition: color 220ms ease; }
.lyg-quicklink__title { font-weight: 700; line-height: 1.15; }
.lyg-quicklink__subtitle { line-height: 1.35; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
    .lyg-quicklink, .lyg-quicklink__shape, .lyg-quicklink__image, .lyg-quicklink__title, .lyg-quicklink__subtitle { transition: none !important; }
    .lyg-quicklink:hover, .lyg-quicklink:focus-within, .lyg-quicklink:hover .lyg-quicklink__shape, .lyg-quicklink:focus-within .lyg-quicklink__shape, .lyg-quicklink:hover .lyg-quicklink__image, .lyg-quicklink:focus-within .lyg-quicklink__image { transform: none !important; }
}

/* Varjuga SVG kaardil väldime filtreeritud kihi GPU-rasteri liigutamist. See eemaldab
   Chromium/Safari animatsiooni ajal tekkiva sirge varjuserva, kuid jätab alles värvi-
   ja ikoonianimatsiooni. */
.lyg-quicklinks--shape-shadow .lyg-quicklink:hover,
.lyg-quicklinks--shape-shadow .lyg-quicklink:focus-within {
    transform: none;
}