making a game website that needs to work on most screens

about my website: it is a truth or dare game currently in the design phase where I need to make it compatible for most if not every device currently looks best/coded the most on 1080p or 1920x1080

I have made some code to detect the widths of the device need help on making the code less repetitious maybe switch case?

i have tried to case switch but unclear how to do in jquery heres the codepen

https://codepen.io/54x1/pen/vYYERWy

could someone please point me in the right direction in not repeating my code and making it more concise and look at my codepen to actually understand want im doing. :)

below is basically the same code but different catches like 2560 width or 1920 width or 1600 width with different variables for the "transform" property.

if ($(this).width() <= 2560) {
            console.log("2560");
            if ($(window).width() > 1920) {
                $('.logoT').css({
                    "transform": "translate(-" + hscroll / 0.5 + "px,-" + hscroll / 0.8 + "px)"
                });
                $('.logoD').css({
                    "transform": "translate(" + hscroll / 0.5 + "px, -" + hscroll / 0.8 + "px)"
                });
            }
            if ($(window).width() < 1920) {
                $('.logoT, .logoD').css({
                    "transform": "translate(0,0)"
                });
                $('.logoOR').css({
                    "transform": "scale(0)"
                });
                $('.main-rules, .mobile-header, .main-home').css({
                    "transform": "translateY(0)"
                });
                $('.arrows-1').css({
                    "transform": "translate(0px, 0)"
                });
            }
            if ($(window).width() > 1920) {
                win = 20;
                if (TopOfWin1 > TopOfObj2) {
                    $('.main-header').css({
                        "display": "none"
                    });
                    $('.logoOR').css({
                        "transform": "scale(0)"
                    });
                    $('.logoT, .logoD').css({
                        "transform": "translate(0px,-" + ((hscroll / 0.35)) + "px)"
                    });
                } else {
                    $('.main-header').css({
                        "display": "grid"
                    });
                    $('.logoOR').css({
                        "transform": "scale(" + (hscroll / 140) + ")"
                    });
                    $('.main-rules, .mobile-header, .main-home').css({
                        "transform": "translateY(-" + (hscroll / 0.85) + "px)"
                    });
                    $('.arrows-1').css({
                        "transform": "translate(0px,-" + ((hscroll / 0.75)) + "px)"
                    });


                }
            }
        }


        if ($(this).width() <= 1920) {
            console.log("1920");
            if ($(window).width() > 1600) {
                $('.logoT').css({
                    "transform": "translate(-" + hscroll / 0.5 + "px,-" + hscroll / 0.8 + "px)"
                });
                $('.logoD').css({
                    "transform": "translate(" + hscroll / 0.5 + "px, -" + hscroll / 0.8 + "px)"
                });
            }
            if ($(window).width() < 1600) {

                $('.logoT, .logoD').css({
                    "transform": "translate(0,0)"
                });
                $('.logoOR').css({
                    "transform": "scale(0)"
                });
                $('.main-rules, .mobile-header, .main-home').css({
                    "transform": "translateY(0)"
                });
                $('.arrows-1').css({
                    "transform": "translate(0px, 0)"
                });
            }
            if ($(window).width() > 1600) {
                if (TopOfWin1 > (TopOfObj2 + 50)) {
                    $('.main-header').css({
                        "display": "none"
                    });
                    $('.logoOR').css({
                        "transform": "scale(0)"
                    });
                    $('.logoT, .logoD').css({
                        "transform": "translate(0px,-" + ((hscroll / 0.35)) + "px)"
                    });


                    $('.gofullscreen').css({
                        "overflow-x": "visible"
                    });


                } else {
                    $('.main-header').css({
                        "display": "grid"
                    });

                    $('.gofullscreen').css({
                        "overflow-x": "hidden"
                    });

                    $('.logoOR').css({
                        "transform": "scale(" + (hscroll / 140) + ")"
                    });
                    $('.main-rules, .mobile-header, .main-home').css({
                        "transform": "translateY(-" + (hscroll / 0.85) + "px)"
                    });
                    $('.arrows-1').css({
                        "transform": "translate(0px,-" + ((hscroll / 0.75)) + "px)"
                    });

                }
            }
        }