.media--view-mode-landing-page-image-no-gutters {
  margin-left: -2rem;
  margin-right: -2rem;
}

/* Image Paragraph */
.paragraph--type--image {
  &.alignment--center {
    text-align: center;
  }
}

/* Remote Video Paragraph */
.paragraph--type--remote-video {
  width: 30rem; /* 480px */

  &.alignment--center {
    margin: 0 auto;
  }
}

/* Remote Video Link Field */
.field--name-field-remote-video-link {
  &.align-right {
    .media--type-remote-video {
      min-width: 22rem;
    }
  }
}

/* All Media Captions */
figure figcaption,
.field--name-field-remote-video-caption {
  font-family: var(--font-family-paragraph);
  font-size: var(--xs-font-size);
  line-height: var(--xs-line-height);
}

/* All remote videos should be responsive */
.remote-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

/* Text Paragraph with Media */
.paragraph--type--text {
  /* Start Caption Structure */
  figure .media--type-remote-video + figcaption {
    width: 30rem; /* Video only */
  }

  /* Width of caption should match width of media */
  figure {
    display: table;

    figcaption {
      display: table-caption;
      caption-side: bottom;
    }
  }

  /* Left-aligned with caption */
  figure.align-left {
    .media--type-image,
    .media--type-vector-image,
    .media--type-remote-video,
    figcaption {
      padding-right: 2rem;
    }
  }

  /* Center-aligned with caption */
  figure.align-center {
    .media--type-image,
    .media--type-vector-image,
    .media--type-remote-video,
    figcaption {
      margin: 0 auto;
    }

    /* Img/Vector Image Only */
    .media--type-image,
    .media--type-vector-image {
      text-align: center;
    }
  }

  /* Right-aligned with caption */
  figure.align-right {
    padding: 0;

    .media--type-image,
    .media--type-vector-image,
    .media--type-remote-video,
    figcaption {
      padding-left: 2rem;
    }
  }

  figure.align-left,
  figure.align-right {
    .media--type-image,
    .media--type-vector-image {
      img {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
      }
    }
  }
  /* End Caption Structure */

  /* Image/Vector Image in Text only */
  .media--type-image,
  .media--type-vector-image {
    &.align-center {
      text-align: center;
    }

    &.align-left { /* No caption */
      padding-right: 2rem;
    }

    &.align-right { /* No caption */
      padding-left: 2rem;
    }

    &.align-left,
    &.align-right {
      img {
        height: auto;
        width: 100%;
        margin: 0;
      }

      + h2 {
        margin-top: 0;
      }
    }

    img {
      display: inline-block;
    }
  }

  /* Remote Video in Text only */
  .media--type-remote-video {
    width: 30rem;

    &.align-left { /* No caption */
      padding-right: 2rem;
    }

    &.align-right { /* No caption */
      padding-left: 2rem;
    }
  }
}

/* Main Body Section Media Only */
.paragraph--type--main-body-section {
  /* Defaults */
  .media--type-remote-video {
    &.media--view-mode-default {
      max-width: 100%;
      width: 100%;
    }

    &.media--view-mode-full-width {
      max-width: 75%;
      width: 100%;
    }

    &.media--view-mode-half-width {
      max-width: 50%;
      width: 100%;
    }
  }

  /* Alignment Left or Right Dropdown */
  &.alignment--left,
  &.alignment--right {
    .media--type-remote-video.media--view-mode-full-width {
      max-width: 100%;
    }
  }

  /* Alignment Full Dropdown */
  &.alignment--full {
    .media--type-remote-video {
      padding: 2rem 4.5rem;
    }
  }
}

.paragraph--type--image,
.paragraph--type--text {
  /* Start quick fixes for media styles */
  /* If SVG file uploaded with image (not vector) field */
  .media--type-image {
    &.media--view-mode-icon img.no-image-style { /* Icon Style */
      width: 34px;
    }

    &.media--view-mode-small img.no-image-style { /* Small Style */
      width: 150px;
    }
  }
  /* End quick fixes for media styles */

  /* Default if SVGs are uploaded properly with vector image upload */
  .media--type-vector-image .field--name-field-media-svg img {
    height: revert-layer;
    width: revert-layer;
  }
}

/* Landing Page Hero Image only */
.media--view-mode-landing-page-hero .field--name-field-media-image img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Vector Image "Crop" Styles */
.media--type-vector-image {
  &.media--view-mode-portrait-small,
  &.media--view-mode-landscape-2-1,
  &.media--view-mode-landscape-3-2,
  &.media--view-mode-landscape-4-3,
  &.media--view-mode-landscape-5-2,
  &.media--view-mode-scale-crop-m {
    .field--name-field-media-svg img {
      object-fit: cover;
    }
  }
}

/* Start specific mobile only */
/* Mobile should stack */
@media screen and (max-width: 30rem) {
  .paragraph--type--text,
  .paragraph--type--_-column-grid {
    .media--type-image,
    .media--type-vector-image {

      &.align-right,
      &.align-left {
        float: none;
        padding: 0;
      }
    }
  }
}
/* End specific mobile only */