.connected-project {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
    background: linear-gradient(to right, #FCFBF700 30%, #FCFBF7aa);
    border-radius: 22px;
    margin-top: 50px;
    position: relative;
    transition: color .2s ease;
}
.connected-project p { margin-bottom: 0; }
.connected-project p span { display: block; }
.connected-project::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    z-index: -1;
    border-radius: 22px;
    background-color: var(--eggshell-muddy);
    transition: background .2s ease;
}
#teaser-30DCC25 {
    width: 200px;
    min-width: 200px;
    height: 200px;
    position: relative;
    margin: -50px 0;
}
#teaser-30DCC25::before {
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    background-image: url('i/teaser-img-chart.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0; left: 0;
    transform-origin: center;
    animation: rotateChart 25s linear infinite;
}
#teaser-30DCC25 img { position: relative; z-index: 5; }

.connected-project:hover::before {
    /* background-color: var(--eggshell-dark-muddy); */
    background-color: var(--carmine);
    
}
.connected-project:hover { 
    color: var(--eggshell-light); 
    background: linear-gradient(to right, #B2363600 30%, #661F1Faa);
}
.connected-project:hover > #teaser-30DCC25::before {
    filter: brightness(5);
    opacity: .7;
}

@keyframes rotateChart {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@media (max-width: 780px) {
    .connected-project p span { display: inline; }   
}
@media (max-width: 600px) {
    .connected-project {
        flex-direction: column-reverse;
        gap: 10px;
        background: linear-gradient(45deg, #FCFBF733, #FCFBF7aa);
    }
    .connected-project p { 
        text-align: center; 
        margin-bottom: 16px;
    }
    #teaser-30DCC25 { margin-bottom: 0; }
}