/* Add this to your CSS file or within a <style> tag in your component */
.questions-grid {
    display: grid;
}

/* Define the number of columns based on screen size */
@media (min-width: 1200px) {
    .questions-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 5 columns for large screens */
        /*height: 65vh;*/
    }
}

@media (min-width: 1327px) and (max-width: 1617px) {
    .questions-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for medium screens */
        /*height: 55vh;*/
    }
}

@media (min-width: 992px) and (max-width: 1327px) {
    .questions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .questions-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 columns for small screens */
    }
}

@media (max-width: 767.98px) {
    .questions-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for extra small screens */
    }
}