.henk-configurator {
  .henk-configurator__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-areas: "conf-visual conf-options"; */
    grid-template-areas:
      "conf-options"
      "conf-visual";
    width: min(var(--size-width-content), 100%);

    @media (min-width: 768px) {
      column-gap: 0;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "conf-options conf-visual";
    }

    .henk-configurator__visual {
      grid-area: conf-visual;
      box-shadow: -1px 0 0 var(--color-border-muted);
    }

    .henk-configurator__options {
      grid-area: conf-options;
    }
  }
}

.configurator__visual,
.henk-configurator__visual {
  position: relative;
  box-shadow: 1px 0 0 var(--color-border-muted);
  display: flex;
  flex-direction: column;
}

.configurator__options,
.henk-configurator__options {
  display: flex;
  flex-direction: column;

  .henk-details.henk-details--plusmin {
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border-muted);

    .henk-details__summary {
      padding-block: 20px;
      padding-inline: min(4.444444vw, 64px);
      line-height: 44px;
      font-weight: 500;
      font-size: var(--size-font-small);

      &::before,
      &::after {
        font-weight: 400;
        right: min(4.444444vw, 64px);
      }

      h2 {
        width: 100%;
        padding-inline: 0 32px;
        margin: 0;
      }

      h3 {
        margin: 0;
        font-size: var(--size-font-small);
        font-weight: 500;
      }
    }

    .henk-details__content {
      padding-inline: min(4.444444vw, 64px);
    }
  }

  > .henk-details.henk-details--plusmin {
    padding-block: 20px;
  }
}