.layout {
  max-width: $bp-large;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;

  @media (min-width: $bp-medium) {
    flex-direction: row;
    margin: 3rem 1rem;
  }

  @media (min-width: $bp-large) {
    margin: 5rem auto;
  }
}

.layout__side {
  width: calc(100% - 1rem);
  margin: .5rem;

  @media (min-width: $bp-medium) {
    width: 4/12 * 100%;
    margin: 0;
    margin-right: 1/12 * 100%;
  }
}

.layout__main {
  width: calc(100% - 1rem);
  margin: .5rem;

  @media (min-width: $bp-medium) {
    margin: 0;
    width: 7/12 * 100%;
  }
}

.layout {
  max-width: $bp-large;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;

  @media (min-width: $bp-medium) {
    flex-direction: row;
    margin: 3rem 3rem;
  }

  @media (min-width: $bp-large) {
    margin: 5rem auto;
  }
}

.layout__side {
  width: calc(100% - 1rem);
  margin: .5rem;

  @media (min-width: $bp-medium) {
    width: 4/12 * 100%;
    margin: 0;
    margin-right: 1/24 * 100%;
  }
}

.layout__main {
  width: calc(100% - 1rem);
  margin: .5rem;

  @media (min-width: $bp-medium) {
    margin: 0;
    width: 7/12 * 100%;
  }
}

Adjust some spacing at medium browser sizes
Adjust some spacing at medium browser sizes
