.img-frame {
  aspect-ratio: 16/9;
  display: grid;
}
.img-frame > * {
  grid-area: 1 / 1;
}
.img-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ----- 2つの線形グラデーションを重ね合わせてブレンドする例 ----- */
.blend-gradient {
  /* 2つのグラデーションを定義 */
  background: linear-gradient(to top, red, blue),
    linear-gradient(to right, pink, lightgreen);
  
  /* 重なったグラデーションをスクリーンモードで合成 */
  background-blend-mode: screen;
}


/* ----- 画像とグラデーションをブレンドする例 ----- */
.blend-bgimg {
  /* 背景画像とグラデーションを指定 */
  background: linear-gradient(
      90deg,
      rgb(40 60 180 / 50%),
      rgb(160 20 160 / 50%)
    ),
    url("../img/img-1.jpg");
  background-size: cover;
  
  /* グラデーションと画像をオーバーレイで合成 */
  background-blend-mode: overlay;
}

/* ----- mix-blend-modeで要素を合成する例 ----- */
.blend-layer-gradient {
  /* グラデーションの背景を持つ要素 */
  background: linear-gradient(
    90deg,
    rgb(40 60 180 / 50%),
    rgb(160 20 160 / 50%)
  );
  /* 下にあるimg要素と合成 */
  mix-blend-mode: overlay;

  /* 画像の半分にだけブレンドする */
  width: 50%;
}


/* ----- テキストと画像のブレンド ----- */
.blend-layer-text {
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
  margin: auto;
  color: #fff;
  
  /* 白い文字を背景とオーバーレイ合成 */
  mix-blend-mode: overlay;
}

/* ----- デュオトーン効果 ----- */
.duotone {
  --background: #ffc223; /* ハイライトカラー（明るい部分の色）*/
  --foreground: #00256f; /* シャドウカラー（暗い部分の色） */

  --blend-bg: multiply;
  --blend-fg: lighten;

  /* 背景色をセット */
  background: var(--background);
}
.duotone img {
  /* 画像を白黒にし、コントラストを少し強める */
  filter: grayscale(1) contrast(1.1);

  /* 画像を親要素の背景色（ハイライトカラー）と乗算で合成 */
  mix-blend-mode: var(--blend-bg);
}
.duotone::after {
  content: "";
  display: block;
  z-index: 1;
  grid-area: 1/1;
  pointer-events: none;

  /* 前面にシャドウカラーを敷く */
  background: var(--foreground);
  
  /* 画像（+背景色）の結果に対して、明るい色（比較・明）でさらに合成 */
  mix-blend-mode: var(--blend-fg);
}

/* ----- filterプリセットの実践例 ----- */
.filtered-demo > figcaption {
  text-align: center;
  font-size: 0.9em;
}

/* 彩度とコントラストを上げて鮮やかに */
.filter-dynamic {
  filter: saturate(1.2) contrast(1.4) brightness(1.2);
}

/* コントラストを下げて柔らかい印象に */
.filter-soft {
  filter: saturate(1.2) contrast(0.85) brightness(1.1);
}

/* セピアを混ぜて少し色褪せた表現 */
.filter-vintage {
  filter: sepia(0.5) contrast(1.1) saturate(0.9);
}

/* 白黒にしてコントラストを調整 */
.filter-mono {
  filter: grayscale(100%) contrast(1.15);
}


/* ----- backdrop-filterで背景加工した例 ----- */
/* レイヤーを重ねて背景画像にフィルターをかける */
.layer-backdrop-filter {
  backdrop-filter: blur(6px) brightness(0.9);
}

/* 画像に直接フィルターをかける */
img.filter-blur {
  filter: blur(6px) brightness(0.9);
}

/* テキスト */
.layer-filter-text {
  align-self: center;
  text-align: center;
  color: #fff;
  font-size: 1.5em;
  padding: 1.5em;
  z-index: 0;
}


/* ----- グラスモーフィズム ----- */
.glass-section {
  min-height: 24em;
  display: grid;
}
.glass-section__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-area: 1/1;

  /* 背景画像を少し暗くしておく */
  filter: brightness(0.9);
}
.glass-section__content {
  display: grid;
  grid-area: 1/1;
  padding: 2em;
  max-width: 40em;
  margin: auto;
}

/* グラス表現のカードUI */
.glass-box {
  display: grid;
  gap: 0.75em;
  font-size: 0.9em;
  padding: 2em 1.5em;
  border-radius: 1em;
  color: #fff;

  /*  グラス表現をより立体的に表現するのためのホワイトシャドウ。 */
  --glass-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15),
    inset 2px 4px 16px -4px rgb(255 255 255 / 0.25);

  /*  普通のボックスシャドウ  */
  --box-shadow: var(--shadow--md);

  /* シャドウを合成 */
  box-shadow: var(--glass-shadow), var(--box-shadow);

  /*  すりガラスの表現  */
  backdrop-filter: brightness(0.95) blur(10px);
  background-color: rgb(255 255 255 / 0.1);
}

