hero page error css

hello this is the code I copied from your documentation. When I glue it
https://docs.generatepress.com/article/page-hero-examples/ (example3)

On line 18 (display: -ms-grid;) it signals me a CSS error.

I can't solve it

.page-hero-content {
padding: 20px;
background-color: rgba(3,150,156,0.1);
border: 1px solid
rgba(120,120,120,0.2);
border-radius: 10px;
max-width: 700px;
}

@media (max-width: 1200px) {
.page-hero-content {
padding: 10px;
margin: auto;
}
}

.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: "left right";
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}

.page-hero-content {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: left;
}

@media (max-width: 768px) {
.inside-page-hero {
display: block;
}
}