/*
 * Airline logos: a rounded-square tile with a soft 3D look (light gradient, inner highlight and shade, layered shadow, a gloss on top)
 * and a small tilt on hover. Hand written (not compiled). The size comes from the element's width / height.
 */
.alogo {
    position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 27%; color: #374151; font-weight: 800; letter-spacing: .02em; line-height: 1;
    background: linear-gradient(145deg, #FFFFFF 0%, #EEF1F6 55%, #DDE3EC 100%);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -3px 6px rgba(15, 23, 42, .12),
        0 1px 1px rgba(15, 23, 42, .25),
        0 7px 14px -6px rgba(15, 23, 42, .55);
    transition: transform .22s ease, box-shadow .22s ease;
    transform: perspective(240px) translateZ(0);
}
.alogo::after { /* the gloss */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(155deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 42%);
}
.alogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 13%; background: transparent; }
a:hover > .alogo, button:hover > .alogo, .alogo:hover, article:hover .alogo {
    transform: perspective(240px) translateY(-2px) rotateX(8deg) rotateY(-7deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 6px rgba(15, 23, 42, .12), 0 2px 2px rgba(15, 23, 42, .25), 0 12px 18px -6px rgba(15, 23, 42, .6);
}
@media (prefers-reduced-motion: reduce) { .alogo { transition: none; } a:hover > .alogo, button:hover > .alogo, .alogo:hover, article:hover .alogo { transform: none; } }