@media screen and (max-width: 1024px) {
  :root {
    --font-size: 24px;
  }

  .container {
    padding-top: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(8rem, 12rem) minmax(8rem, 12rem) minmax(8rem, 12rem);
    grid-template-areas:
      "h h h"
      "l l l"
      "r1c1 r1c2 r1c3"
      "content content content"
      "r3c1 r3c2 r3c3";

    justify-items: center;

    #proiectare {
      grid-area: r1c1 !important;
    }

    #documentatii {
      grid-area: r1c2 !important;
    }

    #fotogrametrie {
      grid-area: r1c3 !important;
    }

    #inspectie {
      grid-area: r3c1 !important;
    }

    #monitorizare {
      grid-area: r3c2 !important;
    }

    #clienti {
      grid-area: r3c3 !important;
    }

    #content {
      grid-area: content !important;
    }

    .button {
      padding: 1rem;

      .icon {
        height: 2rem;
        width: 2rem;
      }

      & h2 {
        font-size: 1rem;
      }

      & h3 {
        display: none;
      }
    }

    .content {
      width: 800px;
      height: 900px;
    }
  }
}