/* General styling */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .my-class {
        font-size: 12px;
    }
}

/* Desktop-specific styles */
@media screen and (min-width: 769px) {
    .my-class {
        font-size: 18px;
    }
}


/* Default: small layout (1 column, 2 rows) */
.responsive-graph {
    height: 125vw;  /* 125% of the viewport width */
}

/* For larger viewports (2 columns, 1 row) */
/* Adjust the breakpoint if needed; here we assume md is at 768px */
@media screen and (min-width: 768px) {
    .responsive-graph {
        height: 80vw;  /* 55% of the viewport width */
    }
}