.box {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 20px;              /* Space between top card and row */
    
    border: 4px solid #f76707;
    border-radius: 5px;
    padding: 25px;
    margin: 0 auto;
    max-width: fit-content;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    overflow: hidden;
}

.card, .top-card, .bottom-card {
    grid-column: 1 / -1;  /* For grid layout to span full width */
    background-color: black; 
    border: 2px solid #ced4da;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    margin-top: 20px;     /* Space above */
}
/* Container for the row of cards */
.card-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
}

                @media (min-width: 1200px) {
                        .box {
                                max-width: 65%;
                        }
                }

                /* Optional: Tighten width even more on ultra-wide monitors */
                @media (min-width: 1600px) {
                        .box {
                                max-width: 55%;
                        }
                }
img {
    max-width: 100%;
    height: 50%;
    display: block;
}