:root {
   --green: #1FB584;
   --dark-blue: #3C4855;
}

#error-page {
   padding: 4rem 0;
}

#error-page .container {
   width: calc(100% - 40px);
   max-width: 1262px;
   padding: 20px;
}

#error-page,
#error-page h1 {
   line-height: 150%;
   color: var(--dark-blue);
}

#error-page h1 {
   padding: unset;
   text-align: start;
   font-size: 32px;
   font-weight: bold;
   margin-bottom: 2rem;
}

#error-page p {
   font-size: 22px;
   margin-bottom: 3rem;
}

#error-page button {
   /* font-family: Montserrat; */
   font-family: Inter;
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: 0em;
   text-align: center;
   outline: none;
   text-shadow: none;

   background: var(--green);
   border: none;

   border-radius: 8px;
   width: 276px;
   height: 52px;
   color: #fff;
}

#error-page .btn_leasemyspace {
   margin-top: 2rem;
   display: block;
   width: 300px;
   height: 52px;
   background: url(/images/error/least_space.svg) no-repeat 0 0;
}

#error-page .grid-container {
   display: grid;
   display: -ms-grid;
   display: -moz-grid;
   gap: 3rem;
}

#error-page .grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

#error-page .grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

#error-page .grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

#error-page .grid-7 {
   grid-template-columns: repeat(7, 1fr);
}

#error-page .image-section {
   display: grid;
   justify-content: center;
   align-content: center;
   width: 100%;
}

@media (max-width: 740px) {
   #error-page .grid-2 {
      grid-template-columns: 1fr;
      row-gap: 4rem;
   }

   #error-page .grid-2 > div:nth-child(1) {
      grid-area: 2 / 1;
   }

   #error-page .grid-2 > div:nth-child(2) {
      grid-area: 1 / 1;
   }
}