.section-full-bleed {
  padding: 0;
}

.section-full-bleed .grid {
  align-items: stretch;
}

.full-bleed__container {
  gap: 0;
}

.full-bleed__cards {
  --card-gap: var(--spacer--xl);
}

.full-bleed__image {
  position: relative;
  aspect-ratio: 3 / 2;
  order: 2;
}

.full-bleed__headline {
  color: var(--accent);
}

@media screen and (min-width: 768px) {
  .full-bleed__image {
    aspect-ratio: unset;
  }
}

.full-bleed__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-bleed__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacer);
  padding: var(--spacer--xxl) var(--spacer--lg);
  order: 1;
}

.full-bleed__content-inner > :last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .section-full-bleed .grid {
    gap: var(--spacer--xxxl);
  }

  .full-bleed__content {
    margin-right: auto;
    width: 100%;
    max-width: calc((var(--container-max-width) * 0.5) - var(--spacer--xl));
    padding: var(--spacer--xxxl) var(--spacer) var(--spacer--xxxl) 0;
  }
}

@media screen and (min-width: 768px) {
  .section-full-bleed.image--left .full-bleed__image {
    order: 1;
  }

  .section-full-bleed.image--left .full-bleed__content {
    order: 2;
  }

  .section-full-bleed.image--right .full-bleed__image {
    order: 2;
  }

  .section-full-bleed.image--right .full-bleed__content {
    order: 1;
    margin-right: unset;
    margin-left: auto;
  }
}