.canvas-wrapper {
    height: 50vh;
}

/* Styles for screens wider than the small-screen breakpoint */
@media (min-width: 576px) {
    .canvas-wrapper {
        height: 50vh;
    }
}

/* Styles for screens wider than the medium-screen breakpoint */
@media (min-width: 768px) {
    
}

/* Styles for screens wider than the large-screen breakpoint */
@media (min-width: 992px) {
    .canvas-wrapper {
        height: 100vh;
    }

    .step-badge { 
        width: 50px;
        height: 50px;
        font-size: 20px; 
    }

    .step-badge-active { 
        width: 50px;
        height: 50px;
        font-size: 20px; 
    }

    .selection-card {
        width: 150px;
        height: 150px;
    }

    .material-image {
        width: 50px;
        height: 50px;
    }
    
}

@media (min-width: 1200px) {

}