.interior-solution-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    padding:2em;
}

.interior-solution-title{
    width: 600px;
    font-weight: 600;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: -0.04em;
    text-align: center;
    color: #000;
    margin-bottom: 2em;
}

.interior-solutions-row{
    display:flex;
    gap:2em;
    width:100%;
    padding:1em 0;
    justify-content:space-between;
    align-items:center;
}

.interior-solutions-item {
    position:relative;
    display:flex;
    width:100%;
    max-width:100%;
    height:454px;
    border-radius:10px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    justify-content:flex-start;
    align-items:flex-start;

    --grad-x-dir: to right; 
    --grad-y-dir: to bottom;
}

.small-mode{width:40%;}
.large-mode{width:60%;}

.interior-solutions-item.right-align{
    justify-content:flex-end;
    --grad-x-dir: to left;
}

.interior-solutions-item.bottom-align{
    align-items:flex-end;
    --grad-y-dir: to top;     
}

.interior-solutions-item::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    z-index:1;

    background:
        linear-gradient(
            var(--grad-x-dir),
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.28) 40%,
            rgba(0,0,0,0)   85%
        ),
        linear-gradient(
            var(--grad-y-dir),
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.28) 40%,
            rgba(0,0,0,0)   85%
        );
    transition:opacity .25s ease;
}

.interior-solutions-item:hover::before{opacity:.9;}

.interior-solution-inner{
    position:relative;
    z-index:2;              
    display:flex;
    flex-direction:column;
    gap:1em;
    width:100%;
    max-width:600px;
    padding:2em;
}

.item-subtitle{
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0;
}

.item-paragraph{
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0;
}

.item-button {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    gap: 1em;
    width: auto;
    padding: 14px 30px;   
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50px;
    backdrop-filter: blur(24px);
    background: rgba(255, 255, 255, .2);
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.04em;
    color: #fff;
    text-decoration: none;
    transition: background-color .3s ease;
    box-sizing: border-box;
}

.item-button:hover{
    background:rgba(255,255,255,.35);
    
}

@media(max-width:768px){
    .interior-solutions-row{flex-direction:column;gap:1em;}
    .small-mode,
    .large-mode{width:100%;}
    .interior-solution-title{width:100%;font-size:48px;}
    .item-subtitle{font-size:24px;}
    .item-button{width:200px;font-size:16px;}
}
