islandlives/css/components/embedded-media.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Embedded Media.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

figure {
  background: var(--color--gray-100);
}

[dir="ltr"] figcaption {
  padding-left: var(--sp0-5);
}

[dir="rtl"] figcaption {
  padding-right: var(--sp0-5);
}

[dir="ltr"] figcaption {
  padding-right: var(--sp0-5);
}

[dir="rtl"] figcaption {
  padding-left: var(--sp0-5);
}

figcaption {
  padding-top: var(--sp0-5);
  padding-bottom: var(--sp0-5);
  color: var(--color-text-neutral-medium);
  background: var(--color--gray-100);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: var(--sp)
}

@media (min-width: 31.25rem) {

[dir="ltr"] figcaption {
    padding-left: var(--sp);
  }

[dir="rtl"] figcaption {
    padding-right: var(--sp);
  }

[dir="ltr"] figcaption {
    padding-right: var(--sp);
  }

[dir="rtl"] figcaption {
    padding-left: var(--sp);
  }

figcaption {
    padding-top: var(--sp);
    padding-bottom: var(--sp)
}
  }

[dir="ltr"] .align-right {
  margin-left: 0;
}

[dir="rtl"] .align-right {
  margin-right: 0;
}

[dir="ltr"] .align-right {
  margin-right: 0;
}

[dir="rtl"] .align-right {
  margin-left: 0;
}

.align-right {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-top: var(--sp3);
  margin-bottom: var(--sp3)
}

@media (min-width: 43.75rem) {

[dir="ltr"] .align-right {
    margin-left: var(--sp);
  }

[dir="rtl"] .align-right {
    margin-right: var(--sp);
  }

[dir="ltr"] .align-right {
    margin-right: 0;
  }

[dir="rtl"] .align-right {
    margin-left: 0;
  }

.align-right {
    float: right; /* LTR */
    max-width: 50%;
    margin-top: var(--sp);
    margin-bottom: var(--sp)

    /**
     * Chromium and Webkit do not yet support flow relative logical properties,
     * such as float: inline-end. However, PostCSS Logical does not compile this
     * value, so we accommodate by not using these.
     *
     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
     * @see https://github.com/csstools/postcss-plugins/issues/632
     */
}
    [dir="rtl"] .align-right {
      float: left;
    }
  }

/* Pull out of grid if nested in content narrow layout. */

.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
  /* @todo this can be simplified. */
}

@media (min-width: 43.75rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
  }
  }

@media (min-width: 62.5rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
  }
  }

@media (min-width: 75rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
  }
  }

@media (min-width: 90rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
  }
  }

[dir="ltr"] .align-left {
  margin-left: 0;
}

[dir="rtl"] .align-left {
  margin-right: 0;
}

[dir="ltr"] .align-left {
  margin-right: 0;
}

[dir="rtl"] .align-left {
  margin-left: 0;
}

.align-left {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-top: var(--sp3);
  margin-bottom: var(--sp3)
}

@media (min-width: 43.75rem) {

[dir="ltr"] .align-left {
    margin-left: 0;
  }

[dir="rtl"] .align-left {
    margin-right: 0;
  }

[dir="ltr"] .align-left {
    margin-right: var(--sp2);
  }

[dir="rtl"] .align-left {
    margin-left: var(--sp2);
  }

.align-left {
    float: left; /* LTR */
    max-width: 50%;
    margin-top: var(--sp);
    margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */

    /**
     * Chromium and Webkit do not yet support flow relative logical properties,
     * such as float: inline-end. However, PostCSS Logical does not compile this
     * value, so we accommodate by not using these.
     *
     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
     * @see https://github.com/csstools/postcss-plugins/issues/632
     */
}
    [dir="rtl"] .align-left {
      float: right;
    }
  }

/* Pull out of grid if nested in content narrow layout. */

@media (min-width: 43.75rem) {

[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
.layout--pass--content-narrow > * .align-left {
    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
  }

[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
.layout--pass--content-narrow > * .align-left {
    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
  }
  }

.align-center img,
.align-center video,
.align-center audio {
  margin-left: auto;
  margin-right: auto;
}

.media-oembed-content {
  display: block;
  max-width: 100%;
}