:root {
  --colorHeaderBackground: rgb(38, 17, 11);
}


/* Variant Boek */

.step-uitslag-boek-grid {
  display: grid;
  grid-template-areas:
    "boekText   boekImage"
    "boekButton boekImage";
  /* grid-template-columns: 1fr 49%; */
  grid-template-columns: 1fr 43.8%;
  grid-template-columns: 1fr 33.5%;
  grid-template-rows: auto 1fr;
}

@media only screen and (max-width: 700px) {
  .step-uitslag-boek-grid {
    grid-template-areas:
      "boekText"
      "boekImage"
      "boekButton";
    grid-template-columns: 1fr;
  }
}

.step-uitslag-boek-text {
  grid-area: boekText;
}

.step-uitslag-boek-button-div {
  grid-area: boekButton;
  justify-self: center;
  padding-bottom: 3rem;
}

.step-uitslag-boek-image-a {
  grid-area: boekImage;
  align-self: center;
  justify-self: center;
  margin-right: -2rem;
  margin-left: -1.7rem;
}

.step-uitslag-boek-image {
  height: auto;
  width: 100%;
  max-width: 450px;
  object-fit: contain;
}


/* Variant Evenement */

.step-uitslag-evenement-grid {
  display: grid;
  grid-template-areas:
    "evenementText   evenementImage"
    "evenementButton evenementImage";
  /* grid-template-columns: 1fr 49%; */
  grid-template-columns: 1fr 34%;
  grid-template-rows: auto 1fr;
  column-gap: 2rem;
}

@media only screen and (max-width: 700px) {
  .step-uitslag-evenement-grid {
    grid-template-areas:
      "evenementText"
      "evenementImage"
      "evenementButton";
    grid-template-columns: 1fr;
  }

  .step-uitslag-evenement-image-a {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
    margin-bottom: 2rem;
    margin-top: .8rem;
  }
}

.step-uitslag-evenement-text {
  grid-area: evenementText;
}

.step-uitslag-evenement-button-div {
  grid-area: evenementButton;
  justify-self: center;
  padding-bottom: 3rem;
}

.step-uitslag-evenement-image-a {
  grid-area: evenementImage;
  align-self: center;
  justify-self: center;
  /* margin-right: 2rem; */
  /* margin-left: 1.7rem; */
}

.step-uitslag-evenement-image {
  height: auto;
  width: 100%;
  max-width: 450px;
  object-fit: contain;
}

/* Variant Webinar */

.step-uitslag-webinar-grid {
  display: grid;
  grid-template-areas:
    "webinarText1   webinarText1"
    "webinarText2   webinarImage"
    "webinarButton webinarImage";
  grid-template-columns: 1fr 55%;
  /* grid-template-columns: 1fr 43%; */
  grid-template-rows: auto 1fr;
  column-gap: 2rem;
}

.step-uitslag-webinar-text1 {
  grid-area: webinarText1;
}

.step-uitslag-webinar-text2 {
  grid-area: webinarText2;
}

.step-uitslag-webinar-button-div {
  grid-area: webinarButton;
  justify-self: center;
  padding-bottom: 3rem;
}

.step-uitslag-webinar-image-a {
  grid-area: webinarImage;
  align-self: top;
  justify-self: center;
  margin-top: -1rem;
  /* margin-right: 2rem; */
  /* margin-left: 1.7rem; */
}

.step-uitslag-webinar-image {
  height: auto;
  width: 100%;
  /* max-width: 450px; */
  object-fit: contain;
}

@media only screen and (max-width: 970px) {
  .step-uitslag-webinar-image-a {
    align-self: center;
  }
}

@media only screen and (max-width: 700px) {
  .step-uitslag-webinar-grid {
    grid-template-areas:
      "webinarText1"
      "webinarImage"
      "webinarText2"
      "webinarButton";
    grid-template-columns: 1fr;
  }

  .step-uitslag-webinar-image-a {
    /* margin-left: 1.125rem;
    margin-right: 1.125rem; */
    margin-bottom: 1.6rem;
    margin-top: 0rem;
  }
}