.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);

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

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

    @media only screen and (min-width: 640px) {
      .content-grid__item--horizontal {
        container-name: content-grid__item--horizontal;
        container-type: inline-size;

        .content-grid__item__container {
          display: grid;
          align-items: center;
          padding: 0;
        }

        .content-grid__item__image-container {
          margin: 0;

          img {
            width: revert-layer;
            height: auto;
          }
        }

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

        &:nth-child(odd):has(.content-grid__item__image-container) .content-grid__item__container {
          grid-template-columns: 1fr fit-content(50cqw);
          flex-direction: row-reverse;

          .content-grid__item__image-container {
            grid-row-start: 1;
            grid-column-start: 2;
          }

          .content-grid__item__content-container {
            padding-left: 0;
          }
        }

        &:nth-child(even):has(.content-grid__item__image-container) .content-grid__item__container {
          grid-template-columns: fit-content(50cqw) 1fr;
          flex-direction: row;

          .content-grid__item__content-container {
            padding-right: 0;
          }
        }
      }
    }

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

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

      .btn {
        align-self: center;
      }
    }
  }
}