$details-box-breakpoint: 40rem;

:root {
  --details-box-background-color: var(--color-orange-light);
  --details-box-font-size: 1.6rem;
  --details-box-color: var(--text-color);
  --details-box-icon-color: var(--color-orange);
  --details-box-items-row-gap: 1em;
  --details-box-items-column-gap: 2rem;

  @include use-responsive-sizing(--details-box-padding-block, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(--details-box-padding-inline, responsive-map(xs 2rem, l 4rem));
}

.details-box {
  background-color: var(--details-box-background-color);
  color: var(--details-box-color);
  container-name: details-box;
  container-type: inline-size;
  font-size: var(--details-box-font-size);
  line-height: var(--line-height-body);
  padding-block: var(--details-box-padding-block);
  padding-inline: var(--details-box-padding-inline);
}

.details-box__items {
  display: grid;
  row-gap: var(--details-box-items-row-gap);
}

.details-box__item {
  column-gap: var(--details-box-items-column-gap);
  display: flex;
  flex-direction: column;
  row-gap: 0.2em;

  @container details-box (min-width: #{$details-box-breakpoint}) {
    flex-direction: row;
  }
}

.details-box__item-label {
  display: flex;
  flex-shrink: 0;
  gap: 0.8em;

  @container details-box (min-width: #{$details-box-breakpoint}) {
    inline-size: 33.33%;
    max-inline-size: 25rem;
  }
}

.details-box__item-label-icon {
  color: var(--details-box-icon-color);
  flex-shrink: 0;
  font-size: 1.2em;
  line-height: 1.1;
}

.details-box__item-label-text {
  font-weight: var(--font-weight-semibold);
}

.details-box__item-text {
  --bullet-list-indent: -0.5rem;

  padding-inline-start: 2em;

  * + * {
    margin-block-start: 0.5em;
  }

  @container details-box (min-width: #{$details-box-breakpoint}) {
    padding-inline-start: 0;
  }
}

.details-box__buttons {
  --button-width: 100%;
  --progress-button-width: 100%;

  display: grid;
  row-gap: 1.5em;

  &:not(:first-child) {
    margin-block-start: calc(var(--details-box-padding-block) * 1.5);
  }
}