@scope (.content-grid) {
  :scope {
    --content-grid__amount-per-row: 1; /* Sets amount of items to show per row. */
    @media only screen and (min-width: 640px) {
      --content-grid__amount-per-row: 2;
    }
    @media only screen and (min-width: 990px) {
      --content-grid__amount-per-row: 4;
    }

    --content-grid__gap: var(--spacing-200, 16px); /* gap spacing between items on a row/ column. */
    --content-grid__item__padding: var(--spacing-200, 16px); /* padding on sides of an item, seen between text and image. */
    --content-grid__item__width__parent-width: 100cqw; /* defines responsiveness of item.
    **100cqw -> item will squash to keep items per row consistent.
    **1200px -> items will maintain a width as if they sit in a 1200px container and wrap the amount of items per row when it needs to. */

    /*
    ** Variable math below - DO NOT BREAK!
    */
    --content-grid__width__gap-offset: calc(var(--content-grid__gap) * (var(--content-grid__amount-per-row) - 1)); /* math_for_space_between_items == desired_item_space * (items_per_row - 1). 
    ** Defines how much space is taken up by gap spacing. necessary for item_width math. */
    --content-grid__item__width: calc((var(--content-grid__item__width__parent-width) - var(--content-grid__width__gap-offset)) / var(--content-grid__amount-per-row)); /* item_width == (width_of_parent - space_between_items) / num_items_per_row. */

    --content-grid__item__padding--negative: calc(var(--content-grid__item__padding) * -1); /* Creates a negative version of grid_item_padding. Makes padding_image-offset a bit neater. */
    --content-grid__item__padding__image-offset: var(--content-grid__item__padding--negative) var(--content-grid__item__padding--negative) var(--content-grid__item__padding); /* defines margin of image_container so it will always be 100% width regardless of padding used for text_container.  */

    container-name: content-grid;
    container-type: inline-size;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--content-grid__gap);
  }

  .content-grid__item {
    width: var(--content-grid__item__width);
    overflow: hidden;
    border: 1px solid var(--grey-400, #dedede);
    border-radius: var(--spacing-50, 4px);
  }

  .content-grid__item__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--content-grid__item__padding);
  }

  .content-grid__item__image-container {
    margin: var(--content-grid__item__padding__image-offset);
  }

  .content-grid__item__image-container > img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .content-grid__item__content-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: var(--spacing-200, 16px);
  }

  .content-grid__item__text-container {
    text-wrap: pretty;
  }

  /* content-grid--borderless */
  &.content-grid--borderless {
    .content-grid__item {
      border: none;
      border-radius: 0;
    }

    a.content-grid__item {
      border: 1px solid transparent;

      &:hover {
        border-color: var(--brand-primary-500, #001080);
      }
    }
  }

  /* content-grid--carousel */
  &.content-grid--carousel {
    .slick-list {
      margin: 0 calc(var(--content-grid__gap) / 2 * -1);
      padding-left: 0;
    }

    .slick-slide {
      height: 100%;
      margin: 0 calc(var(--content-grid__gap) / 2);
      & > * {
        height: 100%;
        & > * {
          height: 100%;
        }
      }
    }

    a.content-grid__item:focus-visible {
      outline-offset: -2px;
    }

    .slick-disabled {
      display: none !important;
    }
  }

  /* content-grid--centred */
  &.content-grid--centred {
    .content-grid__item {
      text-align: center;
    }

    .btn {
      align-self: center;
    }
  }

  /* content-grid__item--horizontal */
  @scope ([class*="content-grid__item--horizontal"]) {
    @media only screen and (min-width: 640px) {
      :scope {
        container-name: content-grid__item--horizontal;
        container-type: inline-size;
      }

      .content-grid__item__container {
        display: grid;
        grid-template-columns: fit-content(50cqw) 1fr;
        flex-direction: row;
        align-items: center;
        padding: 0;
      }

      :scope[class*="--reversed"] .content-grid__item__container {
        grid-template-columns: 1fr fit-content(50cqw);
        flex-direction: row-reverse;
      }

      :scope[class*="--reversed"] .content-grid__item__image-container {
        grid-row-start: 1;
        grid-column-start: 2;
      }

      .content-grid__item__image-container {
        margin: 0;
      }

      .content-grid__item__image-container > img {
        width: revert-layer;
        height: auto;
      }

      .content-grid__item__content-container {
        justify-content: center;
        padding: var(--content-grid__item__padding);
      }
    }
  }
}