@media (prefers-color-scheme : dark) {
    .content-new{
      color: var(--st-color-9);
    }
}
.bg-header{
    width             : 100%;
    background-image  : url(/img/media.jpg);
    background-repeat : no-repeat;
    background-size   : cover;
    height            : 80vh;
    margin-top        : 0;
    display           : flex;
    align-items       : center;
}

.content-new{
    background-color: var(--st-color-0);
    margin-top: -30%;
    margin-bottom: -5%;    
    padding: 3em 4em 5em 4em;
    box-shadow : 0 8px 16px rgba(0, 0, 0, 0.15);
}
.content-new div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content-new div h3{
    width: 100%;
}
.content-new div img, .content-new div p{
    width: 48%;
}
.content-new div img{
    height: 48%;
}

.date-slider{
    font-size: var(--st-font-size-xs);
    float: right;
}

button{
    margin-top:4em;
}

@media screen and (max-width : 768px) {
    .content-new{  
        margin-top: -55%;
        margin-bottom: -15%;
        padding: 3em 2em 3em 2em;
    }
    .content-new div img, .content-new div p{
        width: 100%;
        height: 100%;
    }
    .content-new div img{
        margin-bottom: 3em;
    }
    .date-slider{
        float: none;
        margin-bottom: 3em;
    }
}