/**
 * Star Journey Interactive Plugin
 */

/**
 * Card Canvas for Star Goal Journey
 * -----------------------------------------------------------------------------
 */

.sji {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sji__presentation {
    position: relative;
    width: 100%;
    aspect-ratio: 1440/806; /* background image dimensions */
    display: flex;
    justify-content: center;
    align-items: center;
}

.sji__cards {
    display: flex;
    justify-content: center;
    gap: 180px; /* max(30px, calc( ( 50vw / 3 ) - 180px ) ) <- exponential */
    perspective: 1600px;
    perspective-origin: center bottom;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="22px"><defs><marker id="arrow" markerWidth="28" markerHeight="22" refX="0" refY="11" orient="auto" markerUnits="userSpaceOnUse" fill="%23AB8800"><path d="M0,0 L0,22 L26,11 z"/></marker></defs><line x1="0" y1="11" x2="574" y2="11" stroke="%23AB8800" stroke-width="2.5" marker-end="url(%23arrow)"/></svg>');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 48% center;
}

/* Backgrounds */

.sji-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: -1;
}

/**
 * Labels
 * -----------------------------------------------------------------------------
 */

.sji__labels {
    position: relative;
    margin-bottom: 25px;
}

.sji__labels--container {
    position: relative;
    display: flex;
    gap: 180px;
}

.sji__label {
    color: var( --e-global-color-secondary );
    display: inline-block;
    font-weight: 600;
    font-size: 30px;
    font-family: Montserrat, "Open Sans", sans-serif;
    letter-spacing: -1pt;
    width: 234px;
    max-width: 100%;
    text-align: center;
}