Responsive layout for Snoobot is not mantainable

[cnshing]

The following code is rushed/hard-coded to the current page design:

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    grid-column: 2;
    /* This min-height was manually calculated to ensure the container reaches the bottom of the page for large screens. If the tabs component height changes, then this value must be manually adjusted. */
    min-height: calc(98.5vh - 3.375rem);
    grid-row: 1 / span 99;
}

.snoobot {
    position: absolute;
    bottom: 0;
}

/* TODO: Refactor Snoobot responsive layout to not use media queries and !important marker */
@media (max-width: 1157px) {
    .container {
        grid-row: 1;
        /* min-height makes the container long enough just to meet the generate bar component. If the margins between the title
        and bar changes, then this must be manually adjusted */
        min-height: calc(100% + max(4rem, 3.5vh));
        /* At 1157 px, translateX to -3 rem. Then linearly scale to -4rem at 850 px. */
        /* If the title text changes in size in anyway, then this Snoobot svg will overlap the text, and must be manually adjusted */
        transform: translateX(clamp( -3.90rem, -5.826547231270358rem + 3.908794788273615vw, -3rem ));
        width: max(16rem, 165%) !important;
    }
}

/* These widths were choosen simply because at that resolution, the following result "looks good". There is no gurantee that these changes "remain good" as the code base changes .*/
@media (max-width: 1488px) {
    .container {
        width: 200%;
    }
    .snoobot {
        transform: rotate(-20deg);
        bottom: unset;

    }```