#content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content 1fr 1fr;
    grid-gap: 5px;
    padding: 5px;
}
#header {
    grid-column: 1 / 4;
}

.wrapper {
    height: calc(100% - 10px);
    width: calc(100% - 10px);
    padding: 5px;
}
.wrapper > h4 {
    margin-bottom: 8px;
}

#picture-wrapper {
    grid-column: 3;
    grid-row: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
#picture-wrapper img {
    max-height: 100%;   /* never taller than wrapper */
    max-width: 100%;    /* never wider than wrapper */
    height: auto;       /* maintain aspect ratio */
    width: auto;
    box-shadow: #373535 4px 4px 10px 1px;
    display: block;
}
#text-box-1 {
    grid-column: 1;
    grid-row: 2;
}
#text-box-2 {
    grid-column: 2;
    grid-row: 2;
}
#text-box-3 {
    grid-column: 1 / 3;
    grid-row: 3;
}

/* 📱 Mobile Layout */
@media (max-width: 768px) {
    #content {
        grid-template-columns: 1fr;   /* single column */
        grid-template-rows: auto;     /* auto height */
    }

    #header {
        grid-column: 1;
    }

    #picture-wrapper {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        height: auto;             /* let height adjust naturally */
        aspect-ratio: 1 / 1;      /* keep it square (optional) */
        max-width: 400px;         /* optional: stop it being too huge */
        margin: 0 auto;           /* center horizontally */
    }
    #text-box-1,
    #text-box-2,
    #text-box-3 {
        grid-column: 1;
        grid-row: auto;  /* just stack */
    }
}