#document {
    width: 100%;
}
.document-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 1fr;
    padding: 50px 60px;
    gap: 20px;
}
.documet-title {
    grid-column: 1;
    grid-row: 1;
}
.document-image {
    grid-row: 2;
    grid-column: 1;
}
.document-text {
    grid-row: 2;
    grid-column: 2;
    padding: 20px 40px;
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 500;
}
ul ul {
    list-style-type: circle;
    padding-left: 20px;
}
.document-content img {
    width: 800px;
    height: 400px;
}

@media (max-width:800px) {
    body, html {
        width: 100%;
    }
    #document {
        width: 100%;
    }
    .document-content  {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .documet-title,
    .document-image,
    .document-text {
        grid-column: 1;
        grid-row: auto;
    }
    .document-content img {
        width: 110%;
        height: 90%;
    }


}