.block-orderinfo{
    padding-top: 8rem;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%); 
}

.block-orderinfo img{width: 100vw;}
.block-orderinfo .button-link{
    position: absolute;
    max-width: 35rem;
    top: 49%;
    left: 25%;
    transform: translateX(-50%);
    color: white;
    transition: text-shadow 0.2s ease;
}



@media (min-width: 1300px) and (max-width: 1700px) {
    .block-orderinfo .h1 {
            font-size: 30px !important;}
}
@media (min-width: 1201px) and (max-width: 1299px) {
    .block-orderinfo .h1 {font-size: 23px !important;}
    .block-orderinfo .button-link {top: 50%;}
}
@media (min-width: 992px) and (max-width: 1100px) {
    .block-orderinfo .h1 {
            font-size: 22px !important;}
}
@media (max-width:  991px) {
    .block-orderinfo .h1 {font-size: 16px;}
    .block-orderinfo .button-link {
        top: 75%;
        left: 50%;        
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .block-orderinfo .h1 {font-size: 36px !important;}
}
@media (min-width: 576px) and (max-width: 767px) {
    .block-orderinfo .h1 {font-size: 25px !important;}
}
@media (min-width: 490px) and (max-width: 575px) {
    .block-orderinfo .h1 {font-size: 22px !important;}
}
@media (min-width: 451px) and (max-width: 489px) {
    .block-orderinfo .h1 {font-size: 18px !important;}
}
@media (max-width:  450px) {
    .block-orderinfo .h1 {font-size: 16px !important; margin-bottom: 0;}
    .block-orderinfo .button-link {top: 75%;}
}

@media (min-width: 385px) and (max-width: 400px) {
    .block-orderinfo .button-link {top: 76%;}
}
@media (min-width: 359px) and (max-width: 369px) {
    .block-orderinfo .button-link {padding-top: 2px;}
}

.block-orderinfo a.button-link:hover {
    text-decoration: none;
    /* text-shadow: 0 0 5px #ffe7ab, 0 0 15px #ffe7ab; */
    text-shadow: 0 0 8px rgba(255, 231, 171, 0.8), 0 0 15px rgba(255, 231, 171, 0.4);
}

.preview_picture {display: block;}
.detail_picture {display: none;}

@media (min-width: 992px) {
.block-orderinfo {
    position: relative;
    height: 675px;
}

.block-orderinfo::before {
    position: absolute;
    content: "";
    background: var(--sect-banner-bg) no-repeat;
    background-size: contain;
    background-position: center;
    top: 0;
    /* min-width: 1920px; */
    width: 100vw;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: -10;
}
}

@media (max-width: 991px) {
    .block-orderinfo{padding-top: 0rem;}
    .preview_picture {display: none;}
    .detail_picture {display: block;}

}