@media screen and (max-width: 960px) {
  .wrapper {
    display: grid;
    margin: auto;
    width: 98%;
    height: 100vh;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(40px, auto);
    grid-template-areas:
      "hd    hd   hd   hd   hd     "
      "sd    main main main main  "
      "ft    ft   ft   ft   ft         ";
  }


  .promotion-wrap {
    max-width: 50%;
  }

}


@media screen and (max-width: 600px) {

  .wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hd"
      "main"
      "ft ";
  }

  .header {
    grid-template-columns: 1fr;
  }

  .content {
    grid-template-columns: 1fr 1fr;
  }

  .grid-item {
    min-height: 230px;
  }

  .grid-item:hover {
    transition: all 0.5s;
    z-index: 4;
    box-shadow: 0px 0px white, 5px 5px 15px #b2b2b2;
  }

  .footer {
    display: flex;
    flex-direction: row;
  }

  .search {
    height: 100%;
    min-width: 100%;
  }

  .sidebar-dropdown {
    display: grid;
    grid-template-rows: repeat(auto-fit, auto);
    gap: 0;
    color: #3D550C;
    font-weight: bold;
    overflow: auto;
    width: 50vw;
    position: absolute;
    bottom: 4vh;
    left: 0;
    max-height: 60vh;
    z-index: 3;
  }

  .sidebar-dropdown-item {
    display: grid;
    background-color: #6ac76a;
    font-size: clamp(1rem, -1.2rem + 4.27vw, 1.25rem);
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 8px 0;
    border: 1px solid #74f596;
    flex: 1;
    color: #171a18;
  }

  .sidebar {
    display: none;
  }


  .promotion-wrap {
    max-width: 100%;
  }

}