:root {
  /* Card - Image */
  --card-image--container--background_colour: transparent;
  --card-image--container-text_colour: var(--card--container-text_colour, #000000);
  --card-image--border_width: 0;
  --card-image--border_colour: inherit;
  /* Card - Image - Image */
  --card-image--image--border_top_width: 0;
  --card-image--image--border_right_width: 0;
  --card-image--image--border_bottom_width: 0;
  --card-image--image--border_left_width: 0;
  --card-image--image--border_style: solid;
  --card-image--image--border_colour: inherit;
  --card-image--image--border_radius: 10px;
  /* Card - Image - Tag */
  --card-image--image-tag--text_colour: var(--card--image-tag-text_colour, #001247);
  --card-image--image-tag--background_colour: var(--card--image-tag--background_colour, #aa1a2d);
  --card-image--image-tag--font_family: 'Roboto';
  --card-image--image-tag--font_size: 1.25rem;
  --card-image--image-tag--font_weight: 500;
  --card-image--image-tag--font_style: normal;
  --card-image--image-tag--line_height: 120%;
  --card-image--image-tag--border_top_width: 0;
  --card-image--image-tag--border_right_width: 0;
  --card-image--image-tag--border_bottom_width: 0;
  --card-image--image-tag--border_left_width: 0;
  --card-image--image-tag--border_radius: 6px;
  --card-image--image-tag--border_style: solid;
  --card-image--image-tag--border_colour: inherit;
  --card-image--image-tag--icon--font_size: 1.375rem;
  /* Card - Image - Text area */
  --card-image--text-area--border_top_width: 0;
  --card-image--text-area--border_right_width: 0;
  --card-image--text-area--border_bottom_width: 0;
  --card-image--text-area--border_left_width: 0;
  --card-image--text-area--border_style: solid;
  --card-image--text-area--border_colour: inherit;
  /* Card - Image - Metadata/Taxonomy Terms */
  --card-image--metadata--background_colour: #1d42a6;
  --card-image--metadata--text_colour: #ffffff;
  --card-image--metadata--font_family: 'Roboto';
  --card-image--metadata--font_size: 1.125rem;
  --card-image--metadata--font_weight: 500;
  --card-image--metadata--font_style: normal;
  --card-image--metadata--line_height: 120%;
  --card-image--metadata--border_radius: 6px;
  --card-image--metadata--taxonomy-label--text_colour: #61615f;
  --card-image--metadata--taxonomy-term--background_colour: #1d42a6;
  /* Card - Image - Title */
  --card-image--title--text_colour: #002147;
  --card-image--title--font_family: 'Noto Serif';
  --card-image--title--font_size: 2.175rem;
  --card-image--title--font_weight: 400;
  --card-image--title--font_style: normal;
  --card-image--title--line_height: 120%;
  /* Card - Image - Text */
  --card-image--text--font_family: 'Roboto';
  --card-image--text--font_size: 1.125rem;
  --card-image--text--font_weight: 400;
  --card-image--text--font_style: normal;
  --card-image--text--line_height: 160%;
  --card-image--text--padding: 0;
  /* Card - Image - Button */
  --card-image--button--background_colour: var(--button--link-colour_background, #1d42a6);
  --card-image--button--text_colour: var(--button--link-colour_text, #ffffff);
  --card-image--button--font_family: 'Roboto';
  --card-image--button--font_size: 1.375rem;
  --card-image--button--font_weight: 500;
  --card-image--button--font_style: normal;
  --card-image--button--line_height: 120%;
  --card-image--button-active--background_colour: var(--button--link--active--background_colour, #002147);
  --card-image--button-active--text_colour: var(--button--link--active--text_colour, #ffffff);
  --card-image--button-active--border_colour: var(--button--link--active--border_colour, #ffffff);
  /* Card - Image - Button Icon */
  --card-image--button-icon--text_colour: var(--button--chevron--colour, #B9D6F2);
}
/* Main styling */
.oxfcms-layout-card-image {
  background-color: var(--card-image--container--background_colour);
  border-color: var(--card-image--border_colour);
  border-width: var(--card-image--border_width);
  border-style: solid;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 33px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  * {
    margin: 0;
  }
  /* Overlay link */
  .oxfcms-layout-link-overlay {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  /* Image block */
  .oxfcms-card-image__image-container {
    position: relative;
    overflow: hidden;
    border-color: var(--card-image--image--border_colour);
    border-style: var(--card-image--image--border_style);
    border-top-width: var(--card-image--image--border_top_width);
    border-right-width: var(--card-image--image--border_right_width);
    border-bottom-width: var(--card-image--image--border_bottom_width);
    border-left-width: var(--card-image--image--border_left_width);
    border-radius: var(--card-image--image--border_radius);
    aspect-ratio: 16/9;
    .card-image {
      z-index: 1;
    }
    img {
      height: 100%;
      aspect-ratio: 16/9;
      width: 100%;
      object-fit: cover;
      display: block;
    }
  }
  /* Text block */
  .oxfcms-card-image__content {
    display: flex;
    flex-direction: column;
    background-color: var(--card-image--container--background_colour);
    color: var(--card-image--container-text_colour);
    gap: var(--space-sm);
    padding: var(--card-image--text--padding);
    border-color: var(--card-image--text-area--border_colour);
    border-style: var(--card-image--text-area--border_style);
    border-top-width: var(--card-image--text-area--border_top_width);
    border-right-width: var(--card-image--text-area--border_right_width);
    border-bottom-width: var(--card-image--text-area--border_bottom_width);
    border-left-width: var(--card-image--text-area--border_left_width);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    flex-grow: 1;
    .card-metadata {
      width: fit-content;
      *:not(i) {
        color: var(--card-image--metadata--text_colour);
        font-family: var(--card-image--metadata--font_family);
        font-size: var(--card-image--metadata--font_size);
        font-weight: var(--card-image--metadata--font_weight);
        font-style: var(--card-image--metadata--font_style);
        line-height: var(--card-image--metadata--line_height);
      }
      i {
        color: var(--card-image--metadata--text_colour);
        font-size: var(--card-image--metadata--font_size);
        line-height: var(--card-image--metadata--line_height);
      }
      &:has(.oxfcms-taxonomy--vocab-group) {
        --card-image--metadata--background_colour: transparent;
        padding: 0;
        border-radius: 0;
      }
      .card-metadata__region {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 13px;
      }
      .oxfcms-plain-text {
        background-color: var(--card-image--metadata--background_colour);
        border-radius: var(--card-image--metadata--border_radius);
        padding: 6px 13px;
      }
      .oxfcms-taxonomy,
      .oxfcms-metadata {
        .group-label {
          color: var(--card-image--metadata--taxonomy-label--text_colour);
          font-family: var(--card-image--text--font_family);
          font-size: var(--card-image--text--font_size);
          font-weight: var(--card-image--text--font_weight);
          font-style: var(--card-image--text--font_style);
          line-height: var(--card-image--text--line_height);
        }
        .group-item {
          background-color: var(--card-image--metadata--taxonomy-term--background_colour);
          color: var(--card-image--metadata--text_colour);
          border-radius: var(--card-image--metadata--border_radius);
          width: fit-content;
          padding: var(--space-3xs) 13px;
          text-decoration: none;
          &:visited, *:visited {
            color: var(--card-image--metadata--text_colour);
          }
        }
      }
      &:not(:has(*)) {
        display: none;
      }
      &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag), :has(.oxfcms-metadata)),
      &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag), :has(.oxfcms-metadata)) {
        display: none;
      }
    }
    .oxfcms-heading {
      h1, h2, h3, h4, h5, h6 {
        color: var(--card-image--title--text_colour);
        font-family: var(--card-image--title--font_family);
        font-size: var(--card-image--title--font_size);
        font-weight: var(--card-image--title--font_weight);
        font-style: var(--card-image--title--font_style);
        line-height: var(--card-image--title--line_height);
      }
    }
    /* Metadata component */
    .oxfcms-card-image__image-tag {
      color: var(--card-image--image-tag--text_colour);
      border-color: var(--card-image--image-tag--border_colour);
      border-style: var(--card-image--image-tag--border_style);
      border-top-width: var(--card-image--image-tag--border_top_width);
      border-right-width: var(--card-image--image-tag--border_right_width);
      border-bottom-width: var(--card-image--image-tag--border_bottom_width);
      border-left-width: var(--card-image--image-tag--border_left_width);
      padding: 0;
      width: 100%;
      position: static;
      z-index: 1;
      .metadata-field-content {
        padding-right: var(--space-3xs);
      }
      .l__top_meta {
        .oxfcms-plain-text,
        .oxfcms-metadata,
        .oxfcms-plain-text-content {
          color: var(--card-image--image-tag--text_colour);
          font-family: var(--card-image--image-tag--font_family);
          font-size: var(--card-image--image-tag--font_size);
          font-weight: var(--card-image--image-tag--font_weight);
          font-style: var(--card-image--image-tag--font_style);
          line-height: var(--card-image--image-tag--line_height);
          border-radius: var(--card-image--image-tag--border_radius);
          .fontawesome-icon i, .metadata-field-prefix, .metadata-field-content, title {
            color: var(--card-image--image-tag--text_colour);
            font-size: var(--card-image--image-tag--font_size);
            font-style: var(--card-image--image-tag--font_style);
            line-height: var(--card-image--image-tag--line_height);
          }
          .fontawesome-icon i {
            font-size: var(--card-image--image-tag--icon--font_size);
          }
        }
      }
    }
    .card-text {
      .oxfcms-text {
        font-family: var(--card-image--text--font_family);
        font-size: var(--card-image--text--font_size);
        font-weight: var(--card-image--text--font_weight);
        font-style: var(--card-image--text--font_style);
        line-height: var(--card-image--text--line_height);
      }
    }
    .card-button {
      margin-top: auto;
      .oxfcms-button {
        a {
          width: 100%;
          z-index: 3;
          position: relative;
          background-color: var(--card-image--button--background_colour);
          color: var(--card-image--button--text_colour);
          border: 2px solid var(--card-image--button--background_colour);
          border-radius: 6px;
          font-family: var(--card-image--button--font_family);
          font-size: var(--card-image--button--font_size);
          font-weight: var(--card-image--button--font_weight);
          font-style: var(--card-image--button--font_style);
          line-height: var(--card-image--button--line_height);
          i {
            color: var(--card-image--button-icon--text_colour);
          }
          &:hover {
            background-color: var(--card-image--button-active--background_colour);
            color: var(--card-image--button-active--text_colour);
            border-color: var(--card-image--button-active--border_colour);
            i {
              color: var(--card-image--button-active--text_colour);
            }
          }
        }
      }
    }
  }
}
/* Mercury-specific styling */
.is-mercury-edit-mode,
.lp-builder {
  .oxfcms-layout-card-image {
    overflow: visible;
    .oxfcms-card-image__image-tag {
      min-width: 80px;
      &:not(:has(*)) {
        display: block;
      }
      &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag)),
      &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag)) {
        display: block;
      }
    }
    .oxfcms-layout-link-overlay {
      display: none;
    }
    .card-image:not(:has(img)) {
      min-height: 150px;
      z-index: 1;
      height: 100%;
      &:hover {
        background: linear-gradient(0deg, transparent 45%, rgba(79 70 228 / 10%) 45%, rgba(79 70 228 / 10%) 45% 55%, transparent 55%, transparent 20%, rgba(79 70 228 / 10%) 45% 20%, rgba(79 70 228 / 10%) 45% 30%, transparent 30%), linear-gradient(90deg, transparent 45%, rgba(79 70 228 / 10%) 45% 45%, rgba(79 70 228 / 10%) 45% 55%, transparent 55%, transparent 20%, rgba(79 70 228 / 10%) 45% 20%, rgba(79 70 228 / 10%) 45% 30%, transparent 30%);
        background-size: 1em 1em;
        background-color: #ffffff;
      }
    }
    .card-metadata {
       &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag)), &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag)) {
          display: block;
          min-width: 80px;
      }
    }
    .l__top_meta.js-lpb-region,
    .card-metadata__region.js-lpb-region {
       .js-lpb-component {
         overflow: visible;
       }
       .lpb-controls {
         width: max-content;
         min-width: 180px;
         white-space: nowrap;
         &:not(.is-fixed) {
           position: absolute;
           right: 0;
           z-index: 100;
         }
       }
    }
  }
}
/* Breakpoint - Small Desktop */
@media (width < 1280px) {
  .oxfcms-layout-card-image {
    --card-image--image-tag--font_size: 1.125rem;
    --card-image--metadata--font_size: 1rem;
    --card-image--title--font_size: 1.25rem;
    --card-image--text--font_size: .875rem;
    --card-image--button--font_size: 1.25rem;
    gap: 20px;
    .oxfcms-card-image__content {
      margin-top: 0;
    }
  }
}
/* Breakpoint - Tablet */
@media (width < 768px) {
  .oxfcms-layout-card-image {
    --card-image--image-tag--font_size: 1rem;
    --card-image--metadata--font_size: .875rem;
    --card-image--title--font_size: 1.125rem;
    --card-image--text--font_size: .875rem;
    --card-image--button--font_size: 1.25rem;
    gap: 27px;
  }
}