<header>

  <h1>logo</h1>

  <div class="menu">
    <div class="submenu">
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
    
    <div class="submenu">
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
  </div>

</header>

<div class="flex">

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

  <div class="card">
    This is a card
  </div>

</div>

/* Grid will take card of a responsive gallery without the need of width mediau qeries for breakpoints */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  padding: 2rem;
}

.flex {
  display: flex;
  gap: 10px;
}

/* Card styles */
.card {
  border: 4px solid black;
  padding: 1rem;
  min-height: 6rem;
}

header {
  background: red;
  display: flex;
  justify-content: space-between;
}

.menu {
  display: flex;
  gap: 4rem;
}

.submenu {
  display: flex;
  gap: 1rem;
}