.dx-disp-blocks {

}
.dx-disp-blocks img {
    max-width: 100%;
}
.dx-disp-blocks .dx-section {
    margin: 90px 0;
}

.dx-disp-blocks .dx-section:first-child {
    margin-top: 0;
}
.dx-disp-blocks .dx-section:last-child {
    margin-bottom: -28px ;
}

.dx-disp-blocks .dx-row,
.dx-disp-blocks .dx-flow {
    display: flex;
    margin: -14px -14px 14px -14px;
}
.dx-disp-blocks .dx-row {
    flex-wrap: nowrap;
    max-width: calc(100% + 28px);
}
.dx-disp-blocks .dx-flow {
    flex-wrap: wrap;
    flex-basis: 0;
}
.dx-disp-blocks .dx-row > *,
.dx-disp-blocks .dx-flow > * {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 14px;
}
.dx-disp-blocks .dx-row > * p:last-child,
.dx-disp-blocks .dx-flow > * p:last-child {
    margin-bottom: 0;
}

.dx-disp-blocks .dx-stretch {
    flex-grow: 1;
    min-width: unset;
    max-width: unset;
    width: unset;
    flex-basis: 0;
}

.dx-disp-blocks .no-left-padding {
    padding-left: 0;
}




.dx-disp-blocks .dx-xs-1 {
    width: calc(100% / 12);
    max-width: calc(100% / 12);
    min-width: calc(100% / 12);
}
.dx-disp-blocks .dx-xs-2 {
    width: calc((100% / 12) * 2);
    max-width: calc((100% / 12) * 2);
    min-width: calc((100% / 12) * 2);
}
.dx-disp-blocks .dx-xs-3 {
    width: 25%;
    max-width: 25%;
    min-width: 25%;
}
.dx-disp-blocks .dx-xs-4 {
    width: calc((100% / 12) * 4);
    max-width: calc((100% / 12) * 4);
    min-width: calc((100% / 12) * 4);
}
.dx-disp-blocks .dx-xs-5 {
    width: calc((100% / 12) * 5);
    max-width: calc((100% / 12) * 5);
    min-width: calc((100% / 12) * 5);
}
.dx-disp-blocks .dx-xs-6 {
    width: 50%;
    max-width: 50%;
    min-width: 50%;
}
.dx-disp-blocks .dx-xs-7 {
    width: calc((100% / 12) * 7);
    max-width: calc((100% / 12) * 7);
    min-width: calc((100% / 12) * 7);
}
.dx-disp-blocks .dx-xs-8 {
    width: calc((100% / 12) * 8);
    max-width: calc((100% / 12) * 8);
    min-width: calc((100% / 12) * 8);
}
.dx-disp-blocks .dx-xs-9 {
    width: 75%;
    max-width: 75%;
    min-width: 75%;
}
.dx-disp-blocks .dx-xs-10 {
    width: calc((100% / 12) * 10);
    max-width: calc((100% / 12) * 10);
    min-width: calc((100% / 12) * 10);
}
.dx-disp-blocks .dx-xs-11 {
    width: calc((100% / 12) * 11);
    max-width: calc((100% / 12) * 11);
    min-width: calc((100% / 12) * 11);
}
.dx-disp-blocks .dx-xs-12 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.dx-disp-blocks .option-list-with-images .dx-option-line {
    position: relative;
    margin-bottom: -14px;
}
.dx-disp-blocks .option-list-with-images .dx-option-line:before {
    background-color: var(--bg-surface);
    position: absolute;
    content: ' ';
    display: block;
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    border-radius: var(--border-radius);
    z-index: -1;

}
.dx-disp-blocks .option-list-with-images .dx-option-line .line1 {
    font-weight: 600;
}

.dx-disp-blocks .option-list-with-images .dx-option-line p {
    font-size: 1.4rem;
    line-height: 1.4;
}




@media (min-width: 768px) {

    .dx-disp-blocks .dx-sm-1 {
        width: calc(100% / 12);
        max-width: calc(100% / 12);
        min-width: calc(100% / 12);
    }
    .dx-disp-blocks .dx-sm-2 {
        width: calc((100% / 12) * 2);
        max-width: calc((100% / 12) * 2);
        min-width: calc((100% / 12) * 2);
    }
    .dx-disp-blocks .dx-sm-3 {
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .dx-disp-blocks .dx-sm-4{
        width: calc((100% / 12) * 4);
        max-width: calc((100% / 12) * 4);
        min-width: calc((100% / 12) * 4);
    }
    .dx-disp-blocks .dx-sm-5 {
        width: calc((100% / 12) * 5);
        max-width: calc((100% / 12) * 5);
        min-width: calc((100% / 12) * 5);
    }
    .dx-disp-blocks .dx-sm-6 {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .dx-disp-blocks .dx-sm-7 {
        width: calc((100% / 12) * 7);
        max-width: calc((100% / 12) * 7);
        min-width: calc((100% / 12) * 7);
    }
    .dx-disp-blocks .dx-sm-8 {
        width: calc((100% / 12) * 8);
        max-width: calc((100% / 12) * 8);
        min-width: calc((100% / 12) * 8);
    }
    .dx-disp-blocks .dx-sm-9 {
        width: 75%;
        max-width: 75%;
        min-width: 75%;
    }
    .dx-disp-blocks .dx-sm-10 {
        width: calc((100% / 12) * 10);
        max-width: calc((100% / 12) * 10);
        min-width: calc((100% / 12) * 10);
    }
    .dx-disp-blocks .dx-sm-11 {
        width: calc((100% / 12) * 11);
        max-width: calc((100% / 12) * 11);
        min-width: calc((100% / 12) * 11);
    }
    .dx-disp-blocks .dx-sm-12 {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }



}
@media (min-width: 992px) {


    .dx-disp-blocks .dx-md-1{
        width: calc(100% / 12);
        max-width: calc(100% / 12);
        min-width: calc(100% / 12);
    }

    .dx-disp-blocks .dx-md-2 {
        width: calc((100% / 12) * 2);
        max-width: calc((100% / 12) * 2);
        min-width: calc((100% / 12) * 2);
    }

    .dx-disp-blocks .dx-md-3 {
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }

    .dx-disp-blocks .dx-md-4 {
        width: calc((100% / 12) * 4);
        max-width: calc((100% / 12) * 4);
        min-width: calc((100% / 12) * 4);
    }

    .dx-disp-blocks .dx-md-5 {
        width: calc((100% / 12) * 5);
        max-width: calc((100% / 12) * 5);
        min-width: calc((100% / 12) * 5);
    }

    .dx-disp-blocks .dx-md-6 {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }

    .dx-disp-blocks .dx-md-7 {
        width: calc((100% / 12) * 7);
        max-width: calc((100% / 12) * 7);
        min-width: calc((100% / 12) * 7);
    }

    .dx-disp-blocks .dx-md-8 {
        width: calc((100% / 12) * 8);
        max-width: calc((100% / 12) * 8);
        min-width: calc((100% / 12) * 8);
    }

    .dx-disp-blocks .dx-md-9 {
        width: 75%;
        max-width: 75%;
        min-width: 75%;
    }

    .dx-disp-blocks .dx-md-10{
        width: calc((100% / 12) * 10);
        max-width: calc((100% / 12) * 10);
        min-width: calc((100% / 12) * 10);
    }

    .dx-disp-blocks .dx-md-11 {
        width: calc((100% / 12) * 11);
        max-width: calc((100% / 12) * 11);
        min-width: calc((100% / 12) * 11);
    }

    .dx-disp-blocks .dx-md-12 {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

}



@media (min-width: 1220px) {


    .dx-disp-blocks .dx-lg-1{
        width: calc(100% / 12);
        max-width: calc(100% / 12);
        min-width: calc(100% / 12);
    }

    .dx-disp-blocks .dx-lg-2 {
        width: calc((100% / 12) * 2);
        max-width: calc((100% / 12) * 2);
        min-width: calc((100% / 12) * 2);
    }

    .dx-disp-blocks .dx-lg-3 {
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }

    .dx-disp-blocks .dx-lg-4 {
        width: calc((100% / 12) * 4);
        max-width: calc((100% / 12) * 4);
        min-width: calc((100% / 12) * 4);
    }

    .dx-disp-blocks .dx-lg-5 {
        width: calc((100% / 12) * 5);
        max-width: calc((100% / 12) * 5);
        min-width: calc((100% / 12) * 5);
    }

    .dx-disp-blocks .dx-lg-6 {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }

    .dx-disp-blocks .dx-lg-7 {
        width: calc((100% / 12) * 7);
        max-width: calc((100% / 12) * 7);
        min-width: calc((100% / 12) * 7);
    }

    .dx-disp-blocks .dx-lg-8 {
        width: calc((100% / 12) * 8);
        max-width: calc((100% / 12) * 8);
        min-width: calc((100% / 12) * 8);
    }

    .dx-disp-blocks .dx-lg-9 {
        width: 75%;
        max-width: 75%;
        min-width: 75%;
    }

    .dx-disp-blocks .dx-lg-10{
        width: calc((100% / 12) * 10);
        max-width: calc((100% / 12) * 10);
        min-width: calc((100% / 12) * 10);
    }

    .dx-disp-blocks .dx-lg-11 {
        width: calc((100% / 12) * 11);
        max-width: calc((100% / 12) * 11);
        min-width: calc((100% / 12) * 11);
    }

    .dx-disp-blocks .dx-lg-12 {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

}
