.featured-project-card.is-cropped-cover,
.cx-project-cover-preview {
  aspect-ratio: 24 / 11;
  min-height: 0;
  align-self: start;
}
.featured-project-card.is-cropped-cover .featured-project-backdrop img {
  position: absolute;
  width: calc(100% * var(--project-cover-scale, 1));
  height: calc(100% * var(--project-cover-scale, 1));
  max-width: none;
  left: calc(var(--project-cover-x, 50%) * (1 - var(--project-cover-scale, 1)));
  top: calc(var(--project-cover-y, 72%) * (1 - var(--project-cover-scale, 1)));
  object-position: var(--project-cover-x, 50%) var(--project-cover-y, 72%);
}
.featured-project-card:is(.is-cropped-cover,.is-full-cover):hover .featured-project-backdrop img {
  transform: none;
}
.featured-project-card.is-full-cover {
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: auto;
  align-self: start;
  background: #152238;
}
.featured-project-card.is-full-cover::before {
  content: none;
}
.featured-project-card.is-full-cover .featured-project-backdrop {
  position: static;
  display: block;
}
.featured-project-card.is-full-cover .featured-project-backdrop img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}
.featured-project-card.is-full-cover .featured-project-copy {
  padding: 14px 18px;
}

#cx-project-cover {
  margin: 18px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #c3c4c7;
}
#cx-project-cover h2 {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
#cx-project-cover fieldset {
  min-width: 0;
}
.cx-project-cover-preview {
  box-sizing: border-box;
  width: min(100%, 520px);
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  padding: 16px;
  background: radial-gradient(ellipse at 80% 8%, #b0c8da, transparent 66%),
              linear-gradient(135deg, #5c728e, #2e3952);
}
@media (max-width: 600px) {
  .cx-project-cover-preview { border-radius: 24px; }
}
.cx-project-cover-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #ffffff30, transparent 20%),
              radial-gradient(ellipse at 10% 0%, #ffffff45, transparent 55%),
              linear-gradient(0deg, #0b1425e8, #0b1425a8 35%, transparent 83%);
}
.cx-project-cover-preview .featured-project-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cx-project-cover-preview .featured-project-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}
.cx-project-cover-preview .featured-project-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #fff;
  text-shadow: 0 2px 10px #080f20a8;
  overflow-wrap: anywhere;
}
.cx-project-cover-preview .featured-project-copy strong {
  font-size: 22px;
  line-height: 1.3;
}
.cx-project-cover-preview .featured-project-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #f1f5fa;
  font-size: 14px;
  line-height: 1.55;
}
.cx-project-cover-preview .featured-project-description[hidden] {
  display: none;
}
.cx-project-cover-preview.is-cropped-cover {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.cx-project-cover-preview.is-cropped-cover:active {
  cursor: grabbing;
}
.cx-project-cover-preview.is-image-only::before {
  content: none;
}
.cx-project-cover-preview.is-image-only .featured-project-copy {
  display: none;
}
#cx-project-cover-position label {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 16px 0 0;
}