@media screen and (min-width:1000px) {
    .step-txt {
        margin-left: 1%;
    }

    .step-float>.step-img,
    .step-float>.step-vid {
        margin-right: 20%;
        margin-top: 2.5%;
        /* width: 90%; */
    }

    .step-float .code-container {
        /* margin-top: 6%; */
        /* border: 1px solid magenta; */
    }

}

@media screen and (max-width:959px) {
    .step-txt {
        margin-left: 1%;
    }

    .step-float>.step-img,
    .step-float>.step-vid {
        margin-right: 0%;
        margin-top: 2.5%;
    }

    .step-float .code-container {}

}

@media screen and (max-width:721px) {

    .step-float>.step-img,
    .step-float>.step-vid {
        /* This floats the img to the right */
        width: 50%;
        /* Adjust as needed */
        margin-top: 4%;
        margin-right: 10%;
        /* Optional: adds space between console and text */
    }

    .step-img>img,
    .step-vid>video {
        margin-right: 10%;
    }

    .step-float .code-container {
        margin-top: 10.5%;
        /* border: 1px solid magenta; */
    }

    .enlarge-vid {
        /* position: absolute; */
        transform: scale(1.05);
        margin-right: 50%;
        margin-top: 5%;
        min-width: 500px;
        /* z-index: 2 */
    }
}

@media screen and (max-width:651px) {
    .step h4 {
        margin: 0;
    }

    .step>.step-txt {
        /* flex-basis: 20%; */
        width: 50%;
        /* border: 2px solid orange; */
    }

    .step-img,
    .step-vid {
        width: 50%;
        margin-top: 2.5%;
        margin-bottom: 2.5%;
    }

    .enlarge {
        /* position: absolute; */
        transform: scale(.87);
        left: 2.15%;
        border: 1px solid white;
        margin-right: 0;
        margin-top: 0;
        width: 50%;
        min-width: 300px;
    }

}