.wp-block-ucla-wordpress-plugin-card-story {
  margin-block-start: 0;
  margin-block-end: 0;
  
  .ucla-card__body {
    padding: 1.5rem 1.5rem 2.25rem;

    .ucla-card__date,.ucla-card__author {
      color: #666;
      font-size: 0.875rem;
      font-weight: bold;
      margin: 0;
    }
    .ucla-card__title {
      font-weight: bold;
      margin-bottom: 0.5rem;
      margin-block-start: 0;
      margin-block-end: 0;
      color: #00598c;
    }

    &.ucla-has-background {
      &-grey-05, &-ucla-gold, &-info {
        color: #333;

        .ucla-card__title {
          color: #333;
        }
      }
      &-grey-05 {
        background-color: #f2f2f2;
      }
      &-ucla-blue {
        background-color: #2774ae;
        color: #fff;

        .ucla-card__title, .ucla-card__author, .ucla-card__date {
          color: #fff;
        }
      }
      &-ucla-gold {
        background-color: #ffd100;
      }
      &-info {
        background-color: #8bb8e8;
      }
    }
  }
  .ucla-card{
    display: flex;
    flex-direction: column;

    &.ucla-card__story {
      .ucla-card__image {
        max-width: 100%;
        height: auto;
      }

      .ucla-card__body .ucla-card__title {
        font-size: 1.5rem;
      }
    }
  }
  .ucla-card.ucla-card__story-featured {
    @media (min-width: 782px) {
      flex-direction: row-reverse;
      align-items: center;

      &.ucla-card__story-left {
        flex-direction: row;

        .ucla-card__body {
          margin: 0 0 0 -6.875rem;

          
        }
      }
    }

    .ucla-card__story-featured-image {
      max-width: 100%;
      height: auto;
      @media (min-width: 782px) {
        max-width: 65%;
      }
    }

    .ucla-card__body {
      margin: 0 -6.875rem 0 0;
      width: calc(100% - 48px);
      z-index: 1;
      background-color: #ffffff;

      .ucla-card__title {
        font-size: 1.75rem;
      }
    }
  }
  .ucla-card.ucla-card__story-secondary {
    border-bottom: 1px solid #ccc;
    display: flex;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #ccc;

    .ucla-card__image {
      max-width: 50%;
      height: auto;
    }

    .ucla-card__body {
      padding-top: 0;
      padding-bottom: 0;

      .ucla-card__title {
        margin-bottom: 4px;
        font-size: 1.5rem;
      }
    }
  }

  
}

.wp-block-ucla-wordpress-plugin-card-story-secondary + .wp-block-ucla-wordpress-plugin-card-story-secondary > .ucla-card__story-secondary {
      border-top: 0;

      &:first-child {
        border-top: 0;
      }
    }
  
