.c-grid-wrap {
  max-width: var(--container, 1440px);
  margin: 0 auto;
  padding-inline: var(--pad-x, 15px);
  box-sizing: border-box;
}

.c-grid {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  column-gap: 20px;
}

.c-grid .text_container {
  /* Each column (including the text container) takes up exactly one quarter
   * of the available width minus a quarter of the horizontal gap total.
   * With a 20px column gap on the parent (.c-grid), subtracting 15px from
   * each column width (20px * 3 gaps / 4) ensures that four columns fit
   * in a single row without wrapping. We remove the right margin here and
   * rely solely on the column gap for spacing. */
  width: calc(25% - 15px);
}

.c-grid .crumb {
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: .15em;
  line-height: 1.27625;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.c-grid .subheadline {
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: clamp(12px, 2vw, 23px);
}

.c-grid .text {
  font-weight: var(--fw-regular);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.c-grid .item {
  /* Match the width of the text column and remove individual margins.
   * Margin-bottom is preserved for vertical spacing between rows. */
  width: calc(25% - 15px);
  margin-bottom: 30px;
  text-decoration: none;
  color: inherit;
}

/*
 * The image container defines the dimensions of each card. We keep it
 * relative so that pseudo-elements (like the coloured overlay) can be
 * absolutely positioned inside. An aspect-ratio establishes a fixed
 * proportion regardless of the actual image dimensions. To prevent the
 * image from overflowing horizontally and leaving unintended whitespace,
 * we clip any excess content with `overflow: hidden`. We deliberately
 * avoid setting a border radius here; that styling is delegated to the
 * image and overlay themselves so they align perfectly.
 */
.c-grid .image_container {
  position: relative;
  width: 100%;
  /* Approximate ratio used in the design; adjust if your images have a
   * different aspect. */
  aspect-ratio: 303 / 450;
  margin-bottom: 25px;
  overflow: hidden;
}

.c-grid .image_container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  mix-blend-mode: color;
  pointer-events: none;
  transition: background-color .3s ease-in-out;
}

/*
 * Reset default margins on <figure> and <picture> inside the image container. In
 * many browsers a <figure> element comes with top and bottom margins, which
 * caused the image to be vertically offset relative to the hover overlay. By
 * removing these margins and absolutely positioning the wrapper elements,
 * we ensure the image starts at the top-left of its container without any
 * unwanted spacing.
 */
/*
 * Ensure that <figure> or <picture> wrappers fill the image container without
 * adding extra margins. We don’t absolutely position them; they follow the
 * normal flow and inherit the aspect ratio from the container.
 */
/*
 * Remove default margins on <figure> and ensure both <figure> and
 * <picture> behave as block-level elements. Without explicitly
 * declaring `display:block`, a <picture> defaults to inline layout
 * and may not respect width/height assignments. By promoting these
 * wrappers to block elements and setting their width and height to
 * 100%, they fill the entire container area. This prevents the
 * underlying image from being horizontally offset within the card.
 */
.c-grid .image_container figure,
.c-grid .image_container picture {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * Absolutely position the <img> within its wrapper so that it fills the full
 * extent of the container. The `object-fit: cover` ensures that the image
 * scales and crops appropriately to maintain its aspect ratio while
 * occupying the entire space. Using `border-radius: inherit` allows the image
 * corners to match the container's rounded edges.
 */
/*
 * Style the image within the figure/picture so that it scales to fill
 * its parent. We use object-fit: cover to maintain aspect ratio and crop
 * excess parts. A rounded border matches the overlay corners. We target
 * only the image element itself here; other images (e.g. icons) are
 * unaffected.
 */
.c-grid .image_container figure img,
.c-grid .image_container picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

.c-grid .item:hover .image_container::before {
  background-color: var(--color-accent);
}


.c-grid .reference_text_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.c-grid .reference_text {
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.14;
  color: var(--color-primary);
}

.c-grid .arrow {
  flex-shrink: 0;
}

.c-grid .arrow svg {
  width: 35px;
  height: 35px;
  color: var(--color-accent);
}

/*
 * Style the call-to-action button inside the grid’s text card. The
 * button inherits its font weight and layout from the global `.btn.cta`
 * styles defined in components.css, but we explicitly set the
 * colour of the text to use the primary colour here. This ensures that
 * when the primary colour is changed in tokens.css, the CTA label
 * within the grid reflects that update while the circle and arrow
 * continue to use the accent colours.
 */
.c-grid .btn.cta .btn-text {
  color: var(--color-primary);
}

@media (min-width: 1440px) {
  .c-grid {
    column-gap: 24px;
  }
  
  .c-grid .text_container,
  .c-grid .item {
    width: calc(25% - 18px);
  }
}

@media (max-width: 1023px) {
  .c-grid .text_container {
    width: 100%;
    margin-right: 0;
    padding-bottom: 20px;
  }

  .c-grid .item {
    width: calc(33.333% - 13.33px);
  }
}

@media (max-width: 599px) {
  .c-grid .item {
    width: calc(50% - 10px);
  }
}