.item-page {
  .content-grid {
    --content-grid__amount-per-row: 1;
    --content-grid__gap: var(--spacing-200, 16px);
    --content-grid__item__padding: var(--spacing-200, 16px);
    --content-grid__item__width__parent-width: 100cqw;

    --content-grid__item__width: calc((var(--content-grid__item__width__parent-width) - var(--content-grid__width__gap-offset)) / var(--content-grid__amount-per-row));
    --content-grid__width__gap-offset: calc(var(--content-grid__gap) * (var(--content-grid__amount-per-row) - 1));

    --content-grid__item__padding__image-offset: calc(var(--content-grid__item__padding) * -1) calc(var(--content-grid__item__padding) * -1) var(--content-grid__item__padding);
    /* --content-grid__item__padding: ; */

    container-name: width-checker;
    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);

      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__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 {
      .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;
      }
    }

    @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;
    }
  }
}