/* お悩み：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（左の写真の幅・カードの写真の幅） */
:where([data-section="worries"][data-ui="nexa"]) {
  --worries-backdrop-width: 40%;
  --worries-photo-width: 34%;
  --worries-columns: 2;
  --worries-photo-ratio-sp: 16 / 9;
}

:where([data-section="worries"][data-ui="nexa"]).worries {
  padding-block: var(--space-section);
  overflow: hidden;
}

/* 左の写真は、見出しの下から右へ淡く消える */
:where([data-section="worries"][data-ui="nexa"]) .worries__backdrop {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--worries-backdrop-width);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-transparent) 40%, var(--color-background)), linear-gradient(180deg, var(--color-background) 45%, var(--color-transparent) 85%);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__list {
  display: grid;
  grid-template-columns: repeat(var(--worries-columns), minmax(0, 1fr));
  gap: var(--space-stack);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__item {
  display: flex;
  overflow: hidden;
}

:where([data-section="worries"][data-ui="nexa"]) .worries__content {
  flex: 1;
  display: grid;
  align-content: start;
  gap: var(--space-small);
  padding: var(--space-stack);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__content .icon {
  justify-self: center;
  color: var(--color-primary);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__title {
  font-family: var(--font-title);
  font-size: var(--font-size-lead);
  font-weight: var(--weight-title);
  line-height: var(--line-heading);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__text {
  color: var(--color-text-muted);
}

:where([data-section="worries"][data-ui="nexa"]) .worries__photo {
  flex: none;
  width: var(--worries-photo-width);
}