Content expo: Default

.c-content-expo {
  background-color: #fff;
  text-align: left;
  color: primary(night, 100);

  @include min-screen(bp(tablet)) {
    display: flex;
  }

  .c-tablist--destination & {
    background-color: transparent;
  }

  .c-icon {
    fill: currentColor;
    vertical-align: middle;
    margin-right: remify(4px);
  }

}

.c-content-expo__item {
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    padding: remify(40px);
  }

  .c-dialog &.c-content-expo__item--main {
    padding-left: 0;
  }
  .c-dialog &.c-content-expo__item--side {
    padding-right: 0;
  }

  .c-tablist--destination & {
    padding: remify(16px) 0;
    @include min-screen(bp(tablet)) {
      padding: 0;
    }
  }

  h2 {
    margin-bottom: remify(16px);
    color: primary(night, 100);
    @include font-scale(level-4);
  }

  h4 {
    @include font-scale(level-3);
    font-weight: fw(bold);
    color: primary(night, 100);
    margin-bottom: remify(12px);
    border-top: remify(1px) solid #ccc;
    margin-top: remify(24px);
    padding-top: remify(24px);

    @include min-screen(bp(tablet)) {
      margin-top: remify(16px);
      padding-top: remify(16px);
      margin-bottom: remify(16px);
    }

    &:first-child {
      border: none;
      margin-top: 0;
      padding-top: 0;
    }
  }

  h4.raw {
    font-size: 125%;
    font-weight: fw(regular);
    text-transform: initial;
    border: none;
  }

  p {
    margin-bottom: remify(16px);
    color: currentColor;
  }

  p.wrapped-styled {
    background-color: #fff;
    padding: remify(16px);
    // @include shadow(medium);
    border-radius: remify(4px);
    margin-bottom: 0;
    margin-top: remify(16px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .docs {
    display: flex;
    flex-wrap: wrap;
    & > * {
      flex: 1 0 remify(200px);
    }
  }

  p + a {
    margin-top: remify(24px);
  }
  
  img {
      margin-right: 1rem;
      margin-bottom: 1rem;
  }
}

.c-content-expo__card {
  @include shadow(high);
  border-radius: remify(24px);
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    padding: remify(24px);
  }

  .title {
    @include font-scale(level-4);
    font-weight: fw(bold);
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }

  .row {
    display: flex;
    justify-content: space-between;
  }

  .row + .row {
    border-top: remify(1px) solid primary(night, 10);
    margin-top: remify(16px);
    padding-top: remify(16px);
  }

}

.c-content-expo__footer {
  padding-top: remify(24px);


  .c-button {
    align-self: flex-start;
    margin-bottom: remify(32px);

    @include min-screen(bp(tablet)) {
    margin-bottom: remify(0px);
    }
  }

  @include min-screen(bp(tablet)) {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
  }
}

.c-content-expo__media {

}



.c-content-expo__listitem {
  background-color: secondary(soft, 100);
  border-radius: remify(16px);
  margin-bottom: remify(16px);
  padding: remify(16px);
}

.c-content-expo__today {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &.is-last {
    justify-content: flex-end;
  }

  .icon--flight .c-icon {
    fill: primary(night, 100);
  }

  .c-content-expo__today-info {
    color: secondary(text, 100);
    margin-left: remify(8px);
  }

  .c-content-expo__weather-assets {
    img {
      display: block;
      margin: 0;
    }
  }

}

// .c-content-expo__item--boss {
//   @include min-screen(bp(tablet)) {
//     flex-basis: 60%;
//   }
// }

// .c-content-expo__item--minion {
//   @include min-screen(bp(tablet)) {
//     width: 40%;
//     flex-basis: 40%;
//     padding-left: remify(8px);
//   }

//   .c-tablist--destination & {
//     @include min-screen(bp(tablet)) {
//       padding-left: remify(40px);
//     }
//   }

//   a {
//     display: block;
//   }

// }

.c-content-expo__item--side {
  a {
    display: block;
  }

  p, ul {
    color: secondary(text, 100);
  }
}

/*------------------------------------*\
  Half modifier
\*------------------------------------*/

.c-content-expo--half {

  .c-content-expo__item--boss,
  .c-content-expo__item--minion {
    @include min-screen(bp(tablet)) {
      flex-basis: 50%;
    }
  }
}

/*------------------------------------*
  Spaceless modifier
*------------------------------------*/
.c-content-expo--spaceless {

  .c-content-expo__item {
    padding: 0;
  }
  
}