<main>
  <section class="content">
    <aside>
      <h2>This is sidebar</h2>
      <section class="grid">
        <div class="grid-item">Grid Item 1</div>
        <div class="grid-item">Grid Item 2</div>
        <div class="grid-item">Grid Item 3</div>
      </section>
    </aside>
    <article>
      <h2>This is content</h2>
      <section class="grid">
        <div class="grid-item">Grid Item 1</div>
        <div class="grid-item">Grid Item 2</div>
        <div class="grid-item">Grid Item 3</div>
        <div class="grid-item">Grid Item 4</div>
        <div class="grid-item">Grid Item 5</div>
        <div class="grid-item">Grid Item 6</div>
      </section>
    </article>
  </section>
</main>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Dela+Gothic+One&family=Lato&display=swap");

:root {
  --primary-font: "Bree Serif", serif;
  --primary-color: #333;
  --primary-text-color: #111;
  --secondary-text-color: #fff;
  --primary-padding: 1rem;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
  --heading-font-size: clamp(1.5rem, 3.333vw, 2.5rem);
}
body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  font-size: var(--text-font-size);
}


main {
  padding: var(--primary-padding);
}

.grid {
  /** * User input values. */
  --grid-layout-gap: var(--primary-padding);
  --grid-column-count: 4;
  --grid-item--min-width: 10em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
  margin-bottom: var(--primary-padding);
}

.grid-item {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  text-align: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.content > aside {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  flex-grow: 1;
  flex-basis: 15em;
}

.content > article {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  flex-grow: 3;
  flex-basis: 25em;
}