Main Page/styles.css

/* Grid Container - Flexbox layout for 2x2 grid */ .grid-container {

 display: flex;
 flex-wrap: wrap;
 gap: 1%;

}

/* Grid Box - Individual box styling */ .grid-box {

 flex: 1 1 calc(48% - 0.5%);
 min-width: 300px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.1);
 border-radius: 10px;
 overflow: hidden;
 border: 1px solid #E5E7EB;
 margin-bottom: 20px;
 transition: all 0.3s ease;

}

/* Box Title Section */ .box-title {

 background-color: #EEF2FF;
 padding: 12px;
 font-size: 1.25em;
 font-weight: bold;
 color: #4F46E5;
 border-bottom: 2px solid rgba(79, 70, 229, 0.5);

}

/* Box Content Section */ .box-content {

 padding: 20px;
 background-color: #FFFFFF;
 color: #4B5563;

}

/* Mobile Responsive - Stack boxes vertically on smaller screens */ @media (max-width: 768px) {

 .grid-box {
   flex: 1 1 100%;
   min-width: 100%;
 }

}