@layer abstracts.color {
  :root {
    --blue: #00A9CE;
    --blue-100: #97DCEB;
    --blue-200: #7DD3E6;
    --blue-300: #5CC8E0;
    --blue-400: #33BAD8;
    --blue-500: #00A9CE;
    --blue-600: #0090BC;
    --blue-700: #00689F;
    --blue-800: #00558F;
    --blue-900: #004181;
    --dark-blue: #002D72;
    --dark-blue-100: #0090BC;
    --dark-blue-200: #00689F;
    --dark-blue-300: #00558F;
    --dark-blue-400: #004181;
    --dark-blue-500: #002D72;
    --dark-blue-600: #00245B;
    --dark-blue-700: #001D49;
    --dark-blue-800: #00173A;
    --dark-blue-900: #00122E;
    --gray: #808080;
    --gray-50: #F2F2F2;
    --gray-100: #E5E5E5;
    --gray-150: #D9D9D9;
    --gray-200: #CCCCCC;
    --gray-300: #B2B2B2;
    --gray-400: #999999;
    --gray-500: #808080;
    --gray-600: #666666;
    --gray-700: #4D4D4D;
    --gray-800: #333333;
    --gray-900: #191919;
  }
}
@layer components.blocks.visual-link-list {
  .acf-block-visual-link-list .image {
    container: image/inline-size;
  }
  .acf-block-visual-link-list .image.is-left, .acf-block-visual-link-list .image.is-right {
    width: calc(100% - var(--image--margin, 0px));
  }
  @media only screen and (width >= 64rem) {
    .acf-block-visual-link-list .image {
      aspect-ratio: 852/630;
      --image--margin: calc(
          var(--grid--1fr)
        - var(--grid--gutter-width));
    }
  }
  .acf-block-visual-link-list .link-items .item-link {
    grid-template: "text icon" 1fr "description icon" auto/1fr auto;
  }
  .acf-block-visual-link-list .link-items .item .text {
    grid-area: text;
  }
  .acf-block-visual-link-list .link-items .item .description {
    grid-area: description;
  }
  .acf-block-visual-link-list .link-items .item .icon {
    grid-area: icon;
  }
  :where(.is-dark) .acf-block-visual-link-list .link-items .item {
    border-color: #00A9CE;
  }
  :where(.is-dark) .acf-block-visual-link-list .link-items .item .icon {
    background-color: #00A9CE;
    color: #002D72;
  }
}