.grid-container {
    grid-template-columns: 300px 1fr 300px;
    grid-template-areas:
    "header header header"
    "info content sidebar"
    "photos content sidebar"
    "photos logs sidebar"
    "footer footer footer";
}

.info {
    grid-area: info;
}

.photos {
    grid-area: photos;
}

.logs {
    grid-area: logs;
    padding: 10px;
}

.content {
    padding: 0;
}


@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-rows: repeat(6, auto);
        grid-template-columns: 100%;
        grid-template-areas:
    "header"
    "info"
    "content"
    "photos"
    "logs"
    "footer";
    }
}