SU-SWS/stanford_profile_helper

@charset 'UTF-8';

.su-card {
  img,
  picture {
    width: 100%;
  }
}

// For full width pages
.jumpstart-ui--one-column {
  .container-2-items,
  .container-3-items {
    flex-grow: 1;

    @include grid-media-only('2xl') {
      @include margin(null map-get($su-screen-margins, '2xl'));
    }

    @include grid-media-only('xl') {
      @include margin(null map-get($su-screen-margins, 'xl'));
    }

    @include grid-media-only('lg') {
      @include margin(null map-get($su-screen-margins, 'lg'));
    }

    @include grid-media-only('md') {
      @include margin(null map-get($su-screen-margins, 'md'));
    }

    @include grid-media-only('sm') {
      @include margin(null map-get($su-screen-margins, 'sm'));
    }

    @include grid-media-only('xs') {
      @include margin(null map-get($su-screen-margins, 'xs'));
    }
  }
}

// For all templates.
.react-paragraphs-row {

  // Single item per row on screens less than and equal to md.
  // Added the clear for when media items are floated (right or left) within the wysiwyg.
  &.flex-container {
    clear: both;

    @include grid-media-max('md') {
      display: block;

      .paragraph-item {
        max-width: 100%;
      }
    }
  }

  .ptype-stanford-media-caption {
    .su-media {
      .su-media__caption {
        max-width: 100%;
      }
    }
  }

  // Hide overflowing content.
  .su-card {
    .su-card__contents {
      overflow-y: hidden;
    }
  }

  // This left aligns the offset content on a hero card.
  .flex-3-of-12,
  .flex-4-of-12,
  .flex-6-of-12 {
    .su-hero {
      .su-hero__card {
        @include grid-media-only('lg') {
          left: 0;
        }
      }
    }
  }

  // Makes sure the single item is still centered.
  .flex-12-of-12 {
    @include margin(null auto);
  }

  // Single Event card per row on screens less than and equal to md.
  // For the single per paragraph row.
  @include grid-media-max('md') {

    .flex-12-of-12 {

      .flex-container {
        display: block;

        > div {
          max-width: 100%;
        }

        .ds-entity--stanford-event {
          @include responsive-spacing('padding', null null 3 null);
        }
      }
    }
  }
}