.featured-project {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 90svh;
  color: var(--primary);
}

.featured-project--overlay_dark {
  color: var(--white);
}

/* Boxed section: inset with rounded corners. */
.section--boxed {
  width: initial;
  margin-inline: var(--space-s);
  border-radius: var(--radius);
  overflow: hidden;
}

.featured-project__bg-img {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.featured-project__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;
}

.featured-project__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.featured-project__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: center;
  row-gap: var(--content-gap);
}

.featured-project__inner-col {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.featured-project__container-info {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  width: var(--content-width);
  max-width: 100%;
}

.featured-project__heading {
  font-size: var(--h1);
  color: var(--white);
}

.featured-project__description {
  width: 50ch;
  max-width: 100%;
  font-size: var(--text-l);
}

.featured-project__container-btn {
  display: flex;
  flex-direction: row;
  column-gap: var(--content-gap);
  row-gap: var(--content-gap);
}

@media (max-width: 768px) {
  .featured-project__container {
    align-items: stretch;
  }

  .featured-project__inner-col {
    width: 100%;
  }

  .featured-project__container-info {
    width: 100%;
  }

  .featured-project__container-btn {
    flex-direction: column;
    align-items: stretch;
  }
}