body {
   margin-top: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.head {
   position: sticky;
   top: 0;
   height: 80px;
   width: 100%;
   background: rgb(218, 223, 173);
   text-align: center;
}
.head-title {
   margin: 0 auto 10px;
   padding-top: 10px;
}
.content {
   display: grid;
   grid-template-columns: 1fr 4fr 1fr;
}
.right-col, .left-col {

   background-color: rgba(128, 255, 244, 0.424);
}

.card-box {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 10px;
   padding: 10px;
}

@media screen and (max-width: 960px) {
   .card-box {
      grid-template-columns: 1fr 1fr 1fr;
   }
}

@media screen and (max-width: 768px) {
   .card-box {
      grid-template-columns: 1fr 1fr;
   }
}
@media screen and (max-width: 480px) {
   .card-box {
      grid-template-columns: 1fr;
   }
}

.card-pic {
   margin: 10px auto 10px;
}
.card {
   border: 3px solid rgba(160, 160, 160, 0.322);
   border-radius: 5px;
   height: 250px;
   width: 200px;
   text-align: center;
   background: rgba(216, 253, 194, 0.233);
}

.description {
   margin: 10px auto 10px;
   width: 80%;
   background: rgb(244, 255, 91);
   border-radius: 3px;
   font-weight: 600;
   border: 2px solid rgba(160, 160, 160, 0.322);
   color: rgb(248, 11, 11);
   transition: linear 150ms;
}

.cost {
   margin-left: 10px;
   color: red;
}

.description:hover {
   color: gold;
   background: rgb(11, 146, 135);
}

.item-name {
   margin: 0;
}