.benefits {
  position: relative;
}
.benefits .wrap { width: 50%; }
.benefits .top-part { 
  background-color: var(--fourth-color);
  padding: 6em 2em 2em 10em;
}
.benefits .bottom-part { 
  background-color: var(--third-color);
  padding: 2em 2em 6em 10em;
}


.benefits .grid-row { display: flex; align-items: stretch; justify-content: space-between;}
.benefits .grid-row:not(.no-border) { border-bottom: 1px solid var(--main-color);}
.benefits .grid-row > div { padding: .25em 0; text-align: center; }
.benefits .grid-row .grid-caption { width: 70%;  text-align: left; font-size: 1.5rem; font-weight: 300; }
.benefits .grid-row > :not(.grid-caption) { width: 15%; }
.benefits .yes, .benefits .no { display: flex; align-items: center; justify-content: center;}
.benefits .yes { background-color: var(--white-color); }
.benefits .grid-header .yes { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.benefits .grid-last .yes { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.benefits .grid-header .no span { font-size: 0.875rem; font-weight: 500; line-height: 100%; }
.benefits .grid-header .yes img { max-width: 80%; }
.benefits .grid-header .no,
.benefits .grid-header .yes { padding-top: 1em; padding-bottom: .25em; }

@media all and (min-width: 33.001em) {
  .benefits .benefits-image {
    position: absolute;
    top: 0;
    right: 6em;
    width: calc(40% - 6em);
    height: 100%;
  }

  .benefits .benefits-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
  }
}

@media all and (max-width: 66em) {
  .benefits .top-part { padding: 2em 4em; }
  .benefits .bottom-part { padding: 2em 4em; }
  .benefits .wrap { width: 60%; }
  .benefits .grid-row .grid-caption { font-size: 1rem; }
  .benefits .grid-row .grid-caption { width: 50%; }
  .benefits .grid-row > :not(.grid-caption) { width: 25%; }
  .benefits .benefits-image { padding-top: 0; padding-left: var(--container-padding); padding-right: var(--container-padding); padding-bottom: var(--container-padding); }
  .benefits .benefits-image img { border-radius: var(--radius-md);}
}

@media all and (max-width: 33em) {
  .benefits .top-part { padding: 2em 0; text-align: center; }
  .benefits .bottom-part { padding: 2em 0; }
  .benefits .wrap { width: 100%; }
  .benefits .grid-row .grid-caption { font-size: 1rem; }
  .benefits .grid-row .grid-caption { width: 50%; }
  .benefits .grid-row > :not(.grid-caption) { width: 25%; }
  .benefits .benefits-image { padding-top: 0; padding-left: var(--container-padding); padding-right: var(--container-padding); padding-bottom: var(--container-padding); background-color: var(--third-color); }
  .benefits .benefits-image img { border-radius: var(--radius-md);}
}