@media (min-width: 768px) and (max-width: 1024px) {
    .button-group {
        max-width: 500px;
        margin: 1rem auto;
    }
    .cards {
        width: 90%;
        margin: 0 auto;
        display: grid;
        grid-template-areas:
        "first second"
        "third fourth";
    }
    .cards card:nth-child(1) {
        grid-area: first;
    }
    .cards card:nth-child(2) {
        grid-area: second;
    }
    .cards card:nth-child(3) {
        grid-area: third;
    }
    .cards card:nth-child(4) {
        grid-area: fourth;
    }
    .why-cards {
        width: 100%;
        min-height: 14rem;
        margin: 1rem auto;
    }
    .step-cards-container {
        width: 90%;
        margin: 0 auto;
        display: grid;
        grid-template-areas: 
        "one two"
        "three four";
    }
    .step-card thing:nth-child(1) {
        grid-area: one;
    }
    .step-card thing:nth-child(2) {
        grid-area: two;
    }
    .step-card thing:nth-child(3) {
        grid-area: three;
    }
    .step-card thing:nth-child(4) {
        grid-area: four;
    }
    .step-card {
        width: 80%;
    }
    .benefit-cards {
        width: 90%;
        margin: 0 auto;
        display: grid;
        grid-template-areas: 
        "one two"
        "three four"
        "five six";
    }
    .step-card thing:nth-child(1) {
        grid-area: one;
    }
    .step-card thing:nth-child(2) {
        grid-area: two;
    }
    .step-card thing:nth-child(3) {
        grid-area: three;
    }
    .step-card thing:nth-child(4) {
        grid-area: four;
    }
    .step-card thing:nth-child(5) {
        grid-area: five;
    }
    .step-card thing:nth-child(6) {
        grid-area: six;
    }
    .benefit-card {
        width: 100%;
    }
    .side-by-side-card {
        flex-direction: row;
        margin: 0 auto;
    }
    .left-card {
        width: 55%;
        height: 22rem;
        min-height: 20rem;
        border-radius: 20px 0 0px 20px;
    }
    .right-card {
        width: 45%;
        height: 22rem;
    }
    #right-card img{
        border-radius: 0px 20px 20px 0px !important;
    }
    .pricing-cards {
        flex-direction: row;
    }
    #enterprise {
        min-height: 49rem;
    }
}