/*
 * Project-specific overrides.
 *
 * Keep additions in this file instead of editing compiled CSS files.
 */

/* Realized projects: colored guides visually align banners of mixed widths. */
#realizations .realizations-wrapper {
    width: 100%;
    gap: 0.75rem;
}

#realizations .realizations-row--accent {
    --realizations-accent: #0d4c90;
    position: relative;
    width: 100%;
    min-height: 85px;
    padding: 0.3rem 1.75rem;
}

#realizations .realizations-row--accent::before,
#realizations .realizations-row--accent::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: calc(100% - 0.6rem);
    min-height: 54px;
    background-color: var(--realizations-accent);
    border-radius: 999px;
    opacity: 0.9;
    transform: translateY(-50%);
}

#realizations .realizations-row--accent::before {
    left: 0;
}

#realizations .realizations-row--accent::after {
    right: 0;
}

#realizations .realizations-row--green {
    --realizations-accent: #96b51c;
}

#realizations .realizations-row--yellow {
    --realizations-accent: #f9c80e;
}

#realizations .realizations-row--red {
    --realizations-accent: #d94b3d;
}

#realizations .realizations-row--blue {
    --realizations-accent: #18a4c4;
}

#realizations .realizations-row--split {
    justify-content: space-between;
    gap: 1rem;
}

#realizations .realizations-row--split > a {
    display: block;
    flex: 1 1 360px;
    max-width: calc(50% - 0.5rem);
}

@media (max-width: 767.98px) {
    #realizations .realizations-row--accent {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #realizations .realizations-row--accent::before,
    #realizations .realizations-row--accent::after {
        width: 2px;
        opacity: 0.75;
    }

    #realizations .realizations-row--split > a {
        flex-basis: 100%;
        max-width: 100%;
    }
}