$o-detail-bp1: 400;
$o-detail-bp2: 1000;


.o-details {
  @include paperBackground;
}


.o-details__main {
  @include contain;
  @include vspacing(
      'padding-top' 1,
      'padding-bottom' 1
  );

  @include mq($o-detail-bp2) {
    display: flex;
    flex-direction: row;
  }
}


.o-details__info {
  @include mq($o-detail-bp2) {
    width: column(5, 12);
  }
}


.o-details__specs {
  @include mq($max: $o-detail-bp2) {
    margin-top: space(4);
  }
  @include mq($o-detail-bp2) {
    width: column(6, 12);
    margin-left: column(1, 12);
  }
}


.o-details__title {
  @include font-size(xs);
  @include font-weight('black');
  text-transform: uppercase;
  letter-spacing: 0.93px;
  color: palette(primary);
  margin-bottom: space(1);
}


.o-details__title--padded {
  padding-left: space(2);
}


.o-details__text {
  @include font-size(m, 32);
  margin-top: space(2);
}

.o-details__text--default {
  @include font-weight('bold');
}


.o-details__table {
  border-collapse: collapse;
  width: 100%;
}


.o-details__row {
  &:nth-child(odd) {
    & > td {
      background-color: palette(neutral, 0);
    }
  }

  @include mq($max: $o-detail-bp1) {
    display: flex;
    flex-direction: column;
  }

  @include mq($o-detail-bp1) {
    & > td {
      vertical-align: top;
    }
  }
}



.o-details__label,
.o-details__value {
  padding: space(2);
}


.o-details__label {
  @include font-size(xs, 32);
  @include font-weight('black');
  text-transform: uppercase;
  letter-spacing: 0.93px;
  width: 192px;

  @include mq($max: $o-detail-bp1) {
    padding-bottom: space(1);
    width: auto;
  }
}


.o-details__value {
  @include font-size(m, 32);

  @include mq($max: $o-detail-bp1) {
    padding-top: 0;
  }
}