text-with-media{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background-color: rgb(var(--color-background));
    width:var(--s-width);
}

text-with-media .text-with-media-image{
    display:grid;
    grid-template: "stack";
    grid-template-rows: 100%;
    justify-items: center;
    align-items: center;
    order:var(--image-order);
}
text-with-media .text-with-media-image>div{
    grid-area: stack;
}
text-with-media .text-with-media-image .image-1{
    display:flex;
    width: 100%;
    height: 100%;
}
text-with-media .text-with-media-image .image-2{
    width:50%;
    height:50%;
}

text-with-media .text-width-media-textarea{
    padding:95px 65px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: var(--s-align-items);
    text-align:var(--text-align);
}
text-with-media .text-width-media-textarea .heading{
    margin-bottom: auto;
    color:rgb(var(--color-text));
    width:100%;
}

text-with-media .text-width-media-textarea .content{
    color:rgb(var(--color-text));
    margin-bottom:30px;
}


text-with-media .text-width-media-textarea button{
    color:rgb(var(--color-button-text));
    background-color:rgb(var(--color-button-background));
}
text-with-media .text-width-media-textarea button:hover{
    color: rgb(var(--color-button-secondary-text));
    background-color:rgb(var(--color-button-secondary-background));
}

@media(max-width:959px){
    text-with-media{
        grid-template-columns: repeat(1,1fr);
    }
    text-with-media .text-with-media-image{
        order:var(--image-mobile-order);
    }
    text-with-media .text-width-media-textarea{
        padding:50px 30px;
        padding-bottom: 80px;
        text-align:var(--text-align-mobile);
    }
    text-with-media .text-width-media-textarea .heading{
        margin-bottom: 80px;
    }
    text-with-media .text-width-media-textarea .content{
        margin-bottom:40px;
    }
}