.component-content {
  &.card-component,
  &.clickable_object-component,
  &.complex_button-component,
  &.decide_by_side-component,
  &.hero-component,
  &.hero_with_info_box-component,
  &.highlight_box-component,
  &.intro-component,
  &.photo_gallery-component,
  &.random_image_hero-component,
  &.side_by_side-component,
  &.video_only_hero-component,
  &.video_showcase-component {
    @include halfAndHalfProps();
  }

  &.detailed_images-component {
    @include detailedImagesProps();
  }

  &.fixed_image_scrolling-component {
    @include halfAndHalfProps('imagedescription');
  }

  &.guillotine_images-component {
    @include guillotineImagesProps();
  }

  &.meet_the_team-component {
    @include meetTheTeamProps();
  }

  &.logo_promo_slider-component,
  &.obfuscated_map-component,
  &.reflexive_list-component,
  &.reflexive_image_list-component,
  &.section_header-component,
  &.testimonial_slider-component,
  &.text-component {
    @include verticalProps();
  }

  &.video_description-component {
    @include videoDescriptionProps();
  }

  .component-properties {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .property-container {
      margin-bottom: calculateRem(15);
      
      .title {
        margin-bottom: calculateRem(5);

        font-size: 16px;
        line-height: 20px;
      }
      .property {

        &.property-o_embed,
        &.property-video_embed {
          .input-field {
            display: flex;
            align-items: center;

            input[type=text] {
              flex-grow: 1;

              margin-right: calculateRem(15);
            }

            a.icon-container {
              flex-shrink: 0;

              color: $black;
            }
          }
        }

        .input-field {
          input:not([type=checkbox]):not([type=radio]), textarea {
            width: 100%;
          }

          textarea {
            min-height: calculateRem(100);
          }
        }
      }
    }
  }
}