#header { color: #FFF; }
#header > .content-wrapper { max-width: 1300px; }

/*--------------------------------------------------------------------------------------------------*/

#header > .content-wrapper > .content {
    position: relative;
    display: flex; min-height: 600px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}
@media                            (min-width: 1930px) { #header > .content-wrapper > .content { margin-left: 0; } }
@media (max-width: 1929.99px) and (min-width: 1300px) { #header > .content-wrapper > .content { margin-left: calc(365px - ((100vw - 1200px) / 2)); } }
@media (max-width: 1299.99px) and (min-width: 1100px) { #header > .content-wrapper > .content { margin-left: 265px; } }
@media (min-width: 1100px)    { #header > .content-wrapper > .content { padding: 50px; } }
@media (max-width: 1099.99px) { #header > .content-wrapper > .content { padding: 50px 0; } }

/*--------------------------------------------------------------------------------------------------*/

#header > .content-wrapper > .content > .background {
    position: absolute; top: 0; right: min(-50px, calc(((100vw - 1200px) / 2) * -1)); bottom: 0; left: 0; z-index: -1;
}
@media (min-width: 1100px) {
    #header > .content-wrapper > .content > .background {
        left: 0px;
        overflow: hidden;
        border-bottom-left-radius: 40px;
    }
}
@media (max-width: 1099.99px) {
    #header > .content-wrapper > .content > .background { left: -50px; }
}
#header > .content-wrapper > .content > .background > img {
    position: relative; z-index: 1;
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}
#header > .content-wrapper > .content > .background:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
    
    background-color: rgba(0,0,0,.3);
}

/*--------------------------------------------------------------------------------------------------*/

#header > .content-wrapper > .content > .type {
    margin-bottom: 20px;
    
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
}
#header > .content-wrapper > .content > .type > span { font-weight: 100; }
#header > .content-wrapper > .content > .title {
    max-width: 400px;
    margin-bottom: 20px;
    
    font-size: 35px;
    font-weight: 700;
}
#header > .content-wrapper > .content > .title > span { font-weight: 100; }
#header > .content-wrapper > .content > .details {}
#header > .content-wrapper > .content > .details > .number {
    font-size: 40px;
    font-weight: 700;
    color: var(--main-color);
}
#header > .content-wrapper > .content > .details > .description {
    line-height: 170%;
    font-size: 15px;
}
@media (min-width: 800px) {
    #header > .content-wrapper > .content > .details {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    #header > .content-wrapper > .content > .details > .description { flex: 0 0 350px; }
}
@media (max-width: 799.99px) {
    #header > .content-wrapper > .content > .details > .number { margin-bottom: 20px; }
    #header > .content-wrapper > .content > .details > .description {
        max-width: 350px;
        margin-left: auto;
        text-align: right;
    }
}