­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .jet-satellite-widget { position: relative; z-index: 1; } .jet-tricks-satellite { position: absolute; pointer-events: none; transform-origin: 50% 50%; z-index: 2; .jet-tricks-satellite__text, .jet-tricks-satellite__icon, .jet-tricks-satellite__image { .jet-tricks-satellite__link { pointer-events: auto; cursor: pointer; } } .jet-tricks-satellite__text { font-size: 60px; font-weight: 600; color: #6ec1e4; transform: translateX(-50%) translateY(-50%); span { display: block; white-space: nowrap; transform-origin: 50% 50%; } } .jet-tricks-satellite__icon { position: relative; transform: translateX(-50%) translateY(-50%); .jet-tricks-satellite__icon-instance { position: relative; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50px; color: #fff; background-color: #6ec1e4 } } .jet-tricks-satellite__image { position: relative; transform: translateX(-50%) translateY(-50%); .jet-tricks-satellite__image-instance { width: 100%; height: 100%; display: block; object-fit: cover; transform-origin: 50% 50%; } } &--top-left { top: 0; left: 0; } &--top-center { top: 0; left: 50%; } &--top-right { top: 0; left: 100%; } &--middle-left { top: 50%; left: 0; } &--middle-center { top: 50%; left: 50%; } &--middle-right { top: 50%; left: 100%; } &--bottom-left { top: 100%; left: 0; } &--bottom-center { top: 100%; left: 50%; } &--bottom-right { top: 100%; left: 100%; } }