Custom HTML/CSS not being rendered

I’m trying to make a customized landing home page just HTML and CSS, I’m using WordPress built in HTML content but it doesn’t look the same way than when I serve it outside wordpress, I mean WP doesn’t seem to render some tags like <main>, wrappers and some properties like grid-template-colum:

<main class="grid-welcome">
      <section class="card header">
        <div class="text">
          <p>Colección de Hebillas</p>
          <h2>Hebillas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
        </div>
      </section>
      <section class="card item-11">
        <div class="image"></div>
          <div class="text">
            <h2>Tendencias</h2>
            <a href="#" class="btn">Ver más</a>
          </div>
      </section>
      <section class="card item-12">
        <div class="image"></div>
      </section>
      <section class="card item-21">
        <div class="text">
          <h2>Importados</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
      </section>
      <section class="card item-22">
        <div class="text">
          <p>Ofertas</p>
          <h2>Ofertas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
      </section>
      <section class="card footer">
        <div class="image"></div>
        <div class="text">
          <p>Colección de Hebillas</p>
          <h2>Hebillas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
      </section>
    </main>

.grid-welcome {
  font-size: 16px;
  display: grid;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 15px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 250px);
  gap: 35px; }
  .grid-welcome a,
  .grid-welcome a:visited,
  .grid-welcome a:active {
    font-size: 15px;
    text-decoration: none;
    color: #4e4e4e;
    transition: background-color 0.2s linear; }
    .grid-welcome a:hover,
    .grid-welcome a:visited:hover,
    .grid-welcome a:active:hover {
      border: 1px solid black;
      background-color: black;
      color: white; }
  .grid-welcome .header,
  .grid-welcome .footer {
    grid-column: 1 / -1;
    background: #feeafa; }
  .grid-welcome .item-11 {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
    background: #dee2ff; }
  .grid-welcome .item-12 {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    background-color: #ffede8; }
  .grid-welcome .item-21 {
    grid-column: 2 / 4;
    background-color: #e6bfff; }
  .grid-welcome .item-22 {
    grid-row: 3 / 5;
    grid-column: 2 / 4;
    background-color: #e6bfff; }
  .grid-welcome .card {
    display: flex;
    align-items: center; }
    .grid-welcome .card .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px; }
    .grid-welcome .card .image {
      width: 100%;
      height: 100%;
      background: no-repeat center center / cover; }
  .grid-welcome .header .text,
  .grid-welcome .footer .text {
    width: 40%; }
  .grid-welcome .header .image {
    background-image: url("images/header-hebillas.jpg"); }
  .grid-welcome .footer .image {
    background-image: url("images/footer-hebillas.jpg"); }
  .grid-welcome .item-21 .text {
    width: 370px; }
  .grid-welcome .item-21 .image {
    background-image: url("images/panuelos.jpg"); }
  .grid-welcome .item-22 {
    flex-direction: column;
    background-color: #dee2ff; }
    .grid-welcome .item-22 .text {
      height: 60%;
      justify-content: center; }
    .grid-welcome .item-22 .image {
      background-image: url("images/ofertas.jpg");
      height: 100%; }
  .grid-welcome .item-11 {
    flex-direction: column; }
    .grid-welcome .item-11 .text {
      justify-content: center;
      height: 40%; }
    .grid-welcome .item-11 .image {
      background-image: url("images/vaso.jpeg");
      height: 100%; }
  .grid-welcome .item-12 .image {
    background-image: url("images/mask.jpg"); }
  .grid-welcome .btn {
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid gray;
    padding: 10px 20px;
    margin-top: 10px; }

The page I need help with: [log in to see the link]