:root {
    --desktop_1_space: 10vw;
    --desktop_2_space: 12.5vw;

    --desktop_card_space: 2vw;

    --laptop_1_space: 7.5vw;
    --laptop_2_space: 10vw;

    --tablet_1_space: 2.5vw;
    --tablet_2_space: 5vw;

    --tablet_card_space: 8vw;

    --phone_1_space: 2.5vw;
    --phone_2_space: 5vw;
    
}

.p1 {
    padding-inline: var(--desktop_1_space);
}

.pl1 {
    padding-left: var(--desktop_1_space);
}

.pr1 {
    padding-right: var(--desktop_1_space);
}

.m1 {
    margin-inline: var(--desktop_1_space);
}

.ml1 {
    margin-left: var(--desktop_1_space);
}

.mr1 {
    margin-right: var(--desktop_1_space);
}

.p2 {
    padding-inline: var(--desktop_2_space);
}

.pl2 {
    padding-left: var(--desktop_2_space);
}

.pr2 {
    padding-right: var(--desktop_2_space);
}

.m2 {
    margin-inline: var(--desktop_2_space);
}

.ml2 {
    margin-left: var(--desktop_2_space);
}

.mr2 {
    margin-right: var(--desktop_2_space);
}


@media only screen and (min-width: 1024px) and (max-width: 1750px) {
    .p1 {
        padding-inline: var(--laptop_1_space);
    }

    .pl1 {
        padding-left: var(--laptop_1_space);
    }

    .pr1 {
        padding-right: var(--laptop_1_space);
    }

    .m1 {
        margin-inline: var(--laptop_1_space);
    }

    .ml1 {
        margin-left: var(--laptop_1_space);
    }

    .mr1 {
        margin-right: var(--laptop_1_space);
    }

    .p2 {
        padding-inline: var(--laptop_2_space);
    }

    .pl2 {
        padding-left: var(--laptop_2_space);
    }

    .pr2 {
        padding-right: var(--laptop_2_space);
    }

    .m2 {
        margin-inline: var(--laptop_2_space);
    }

    .ml2 {
        margin-left: var(--laptop_2_space);
    }

    .mr2 {
        margin-right: var(--laptop_2_space);
    }
}


@media only screen and (max-width: 1024px) and (min-width: 640px) {
    .p1 {
        padding-inline: var(--tablet_1_space);
    }

    .pl1 {
        padding-left: var(--tablet_1_space);
    }

    .pr1 {
        padding-right: var(--tablet_1_space);
    }

    .m1 {
        margin-inline: var(--tablet_1_space);
    }

    .ml1 {
        margin-left: var(--tablet_1_space);
    }

    .mr1 {
        margin-right: var(--tablet_1_space);
    }

    .p2 {
        padding-inline: var(--tablet_2_space);
    }

    .pl2 {
        padding-left: var(--tablet_2_space);
    }

    .pr2 {
        padding-right: var(--tablet_2_space);
    }

    .m2 {
        margin-inline: var(--tablet_2_space);
    }

    .ml2 {
        margin-left: var(--tablet_2_space);
    }

    .mr2 {
        margin-right: var(--tablet_2_space);
    }

}

@media only screen and (max-width: 640px) {
    .p1 {
        padding-inline: var(--phone_1_space);
    }

    .pl1 {
        padding-left: var(--phone_1_space);
    }

    .pr1 {
        padding-right: var(--phone_1_space);
    }

    .m1 {
        margin-inline: var(--phone_1_space);
    }

    .ml1 {
        margin-left: var(--phone_1_space);
    }

    .mr1 {
        margin-right: var(--phone_1_space);
    }

    .p2 {
        padding-inline: var(--phone_2_space);
    }

    .pl2 {
        padding-left: var(--phone_2_space);
    }

    .pr2 {
        padding-right: var(--phone_2_space);
    }

    .m2 {
        margin-inline: var(--phone_2_space);
    }

    .ml2 {
        margin-left: var(--phone_2_space);
    }

    .mr2 {
        margin-right: var(--phone_2_space);
    }
}