.solutionsContent{
    width: 90%;
    display: flex;
    flex-direction: column;
    max-width: var(--max-sm-width);
    margin: 5rem auto;
}
.solutions__infoContainer{
    background-color: var(--white);
    border-radius: 2rem;
    border-left: 1rem solid #407BFF;
    background: #FFF;
    box-shadow: 0px 17px 40px 0px rgba(50, 140, 215, 0.20);
    padding: 4rem;
}
.solutions__headline{
    font-size: var(--fs-large);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-blue);
    margin-bottom: 1rem;
}
.solutions__description{
    font-size: var(--fs-smaller);
    font-weight: 400;
    opacity: 0.5;
}
.solutions__puzzleContainer{
    margin: 8rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
}
.solutions__puzzle{
    position: relative;
    max-width: 40%;
    display: grid;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s cubic-bezier(0.33, 1, 0.68, 1), z-index 0s;
}
/* Soft circular glow behind the piece on hover - a shape-hugging drop-shadow would trace the
   image's actual (not cleanly transparent) bounding box and show as a square, so this uses an
   independent blurred circle instead, which reads as a glow regardless of the artwork's shape. */
.solutions__puzzle::after{
    content: '';
    position: absolute;
    inset: 8%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 42, 121, 0.45) 0%, rgba(0, 42, 121, 0) 72%);
    filter: blur(18px);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.33, 1, 0.68, 1);
    pointer-events: none;
}
/* Dim every other piece so the hovered one reads clearly, instead of relying on scale alone */
.solutions__puzzleContainer:hover .solutions__puzzle{
    opacity: 0.55;
}
.solutions__puzzleContainer:hover .solutions__puzzle:hover{
    opacity: 1;
}
.solutions__puzzle:hover{
    transform: scale(1.25);
    z-index: 100;
}
.solutions__puzzle:hover::after{
    opacity: 1;
}
.solutions__puzzle > *{
    grid-row: 1 / -1;
    grid-column: 1/-1;
}
.solutions__puzzle img{
    z-index: 1;
    width: 100%;
}
.solutions__puzzle svg{
    display: none;
    z-index: 2;
}
.solutions__puzzle span{
    z-index: 2;
    color: var(--white);
    align-self: center;
    justify-self: center;
}
.solutions__puzzle:nth-child(odd) span{
    width: 70%;
    justify-self: flex-end;
}
.solutions__puzzle:nth-child(even) span{
    width: 70%;
    justify-self: flex-end;
} 
.solutions__puzzleImg--odd{
    transform: scale(1.3) translate(11.2%, -11.9%);
}
.solutions__puzzleImg--even{
    transform: scale(1.3) translate(11.2%, 11.2%);
}
.solutions__puzzleDescription{
    display: none;
}
@media (min-width: 400px){
    
    .solutions__puzzle svg{
        display: flex;
        justify-self: center;
        width: 60px;
    }
    .solutions__puzzle:nth-child(odd) span{
        width: auto;
        justify-self: center;
        width: 140px;
        text-align: center;
        margin-bottom: 90px;
    }
    .solutions__puzzle:nth-child(even) span{
        width: auto;
        justify-self: center;
        width: 140px;
        text-align: center;
        margin-top: 90px;
    }
}
@media (min-width: 768px){
    .solutions__puzzle svg{
        z-index: 2;
        justify-self: center;
        width: 6rem;
        margin-left: 2rem;
        font-size: var(--fs-smaller);
    }
    .solutions__puzzleContainer{
        margin: 8rem auto;
    }
    .solutions__puzzle{
        max-width: 25%;
    } 
}