:root {
  --space: 1rem;
  --space-xs: calc(var(--space) / 3);
  --space-sm: calc(var(--space) / 2);
  --space-md: calc(var(--space) * 2);


}

/* Here are the base styles for the main layout and sticky component */


main {
  display: flex;
  flex-wrap: wrap;
}

.article {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 40%;
}

.sidebar {
  --offset: var(--space);
  flex-grow: 1;
  flex-basis: 300px;
  align-self: start;
  position: sticky;
  top: calc(15vh - var(--offset));
}

.component {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.component .content {
  max-height: 500px;
  overflow-y: auto;
}

.sidebar .component {
  max-height: calc(120vh - var(--offset) * 2);
}



header,
footer {
  display: flex;
  align-items: center;
  justify-content: center;

}

/* Until flexbox gap is supported in all modern browsers, we use the negative margin trick to create space between the children elements */
main {
  margin-bottom: calc(var(--space-md) * -1);
  margin-left: calc(var(--space-md) * -1);
}

main>* {
  margin-bottom: var(--space-md);
  margin-left: var(--space-md);
}

article>*+* {
  margin-top: var(--space);
}

.component {
  position: relative;
  border: 1px solid var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.03),
    0 16px 32px rgba(0, 0, 0, 0.02), 0 32px 64px rgba(0, 0, 0, 0.02);
}

.component .header,
.component .footer {
  padding: var(--space-sm);
  text-align: center;
}

.component .header {
  border-bottom: inherit;
}

.component .footer {
  display: flex;
  justify-content: space-between;
  border-top: inherit;
}

.component .content {
  padding: var(--space-sm);
  max-height: 500px;
  overflow-y: auto;
  color: var(--color-dark);
}

.empty-text {
  padding: var(--space);
  text-align: center;
  color: var(--color-primary);
}



.empty-cart {
  color: var(--color-mid);
  border-color: var(--color-mid);
  background-color: var(--color-light);
}