.tweet {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    border: 1px solid black;
    border-radius: 5px;
    padding: .5rem;
    gap: .5rem;
}

.tweet > .head {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.tweet > p { margin: 0; }

.tweet > .head > img {
    width: 25px;
    height: 25px;
    border-radius: 50px;
}

.tweet > .head time { font-style: italic; }

.tweet > .tweet { margin-left: 1rem; }

img, video { max-width: 100%; }

.tweet-media {
    /* adapative 2x2 grid, use full space for one, etc */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .25rem;
    overflow: hidden;
}

.tweet-media > :nth-child(1):only-child {
    grid-column: 1 / -1;
    max-height: 100%;
}

.tweet-media > :nth-child(1):only-child > img,
.tweet-media > :nth-child(1):only-child > video {
    max-height: 100%;
    object-fit: contain;
}