/*Обнуление*/
* {
   padding: 0;
   margin: 0;
   border: 0;
}

*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

:focus, :active {
   outline: none;
}

a:focus, a:active {
   outline: none;
}

nav, footer, header, aside {
   display: block;
}

html, body {
   height: 100%;
   width: 100%;
   font-size: 100%;
   line-height: 1;
   font-size: 14px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   background-color: rgb(242, 242, 242);
}

input, button, textarea {
   font-family: inherit;
}

input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a, a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
   font-size: inherit;
   font-weight: 400;
}

/*--------------------*/

.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(6, 1fr);
   gap: 10px;
   max-width: 400px;
   margin: 0 auto;
}

.grid-item {
   background-color: #ffa041;
   aspect-ratio: 1;
   border-radius: 15px;
   font-size: 25px;
   font-weight: 600;
}

.grid-item--big {
   grid-column: span 4;
   border: 2px solid black;
   border-radius: 15px;
   line-height: 100%;
   font-size: 25px;
   padding: 20px;
   background-color: rgb(255, 255, 255);
}

@media (hover: hover) {
   .grid-item:hover {
      background-color: #d6710c;
      transform: scale(0.95);
   }
}