body {
    /* margin: 0; */
}
.reportsInputGrid {
    display: grid;
    /* gap: 0.2rem; */ /* Space between columns/rows */
    /* Default mobile layout (single column) */
    grid-template-areas:
        "reportsInputGridColumn1"
        "reportsInputGridColumn2";
}
/* Desktop layout (1:3 ratio) */
/* @@media (min-width: 768px)  */
@media (min-width: 560px) {
    .reportsInputGrid {
        grid-template-columns: 1fr 4fr; /* 1:3 ratio */
        grid-template-areas: "reportsInputGridColumn1 reportsInputGridColumn2";
    }
}

.reportsInputGridColumn1 {
    grid-area: reportsInputGridColumn1;
    /* background: #f0f0f0; */
    /*padding: 0.1rem;*/
    padding-top: 4px;
}
.reportsInputGridColumn2 {
    grid-area: reportsInputGridColumn2;
    /* background: #e6f2ff; */
    /*padding: 0.1rem;*/
    padding-top: 4px;
}

.reportsInputSubGrid {
    display: grid;
    /* grid-template-columns: repeat(6, 1fr); */
    /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/ /* Automatically adjust columns */
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); /* Automatically adjust columns */
    /*grid-template-columns: repeat(minmax(280px, 320px));*/ /* Automatically adjust columns */
    /*grid-template-columns: repeat(3, minmax(280px, 320px)); */ /* Automatically adjust columns */
    gap: 0;
    /* gap: 4px; */
    /* Centering essentials */
    width: 94%;
    /* max-width: 840px; */
    /* margin: 0 auto; */
    /* Visual guide */
    /* border: 1px dashed #ccc; */
}

.reportsInputSubGridColumn {
    /*background: #4CAF50; */
    /* padding: 20px; */
    color: white;
    /* text-align: center; */
}
.reportsInputSubGridColumn-2-3 {
    grid-column: 2 / span 2;
    background: lightblue;
    /* Force the span to always cover 2 columns */
    /*min-width: calc(280px * 02px);*/ /* 2*min-width + gap */
    /*min-width: 280px;*/
}

@media (max-width: 559px) {
    .reportsInputSubGridColumn-2-3 {
        /*grid-column: 2 / span 1;*/
        grid-column: 1;
        /*min-width: 280px;*/
    }
}