@import '../../styles/breakpoints/index';

.grid {
  width: 100%;
  display: grid;
  grid-gap: var(--gutter);
  grid-row-gap: calc(var(--margin) * 2);

  @media ($md) {
    grid-template-columns: repeat(10, 1fr);
  }
}

.aside {
  position: relative;

  @media ($md) {
    padding-right: 32px;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
}

.header {
  margin-bottom: calc(var(--margin) * 2);
}

.refinementList {
  width: 100%;

  @media ($md) {
    position: sticky;
    top: calc(var(--CustomSearchBox-inputHeight) + 2px + var(--Layout-paddingTop));
  }
}

.main {

  @media ($md) {
    grid-column: 3 / span 8;
    grid-row: 1;
  }
}

.hits {
  margin-bottom: calc(var(--margin) * 2);
}

.pagination {
  margin-bottom: calc(var(--margin) * 2);
}

.accent {
  font-weight: 700;
  color: var(--color-primary);
}
