.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つの線形gradientをblend */
.blend-gradient {
    background: linear-gradient(to top, red, blue),
        linear-gradient(to right, pink, lightgreen);

        background-blend-mode: screen;
}

/* 画像とgradientをblend */
.blend-bgimg {
    background: linear-gradient(
            90deg,
            rgb(40 60 180 / 50%),
            rgb(160 20 160 / 50%)
        ),
        url("../img/sky2.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%)
    );
    mix-blend-mode: overlay;

    width: 50%;
}

/* textと画像のblend */
.blend-layer-text {
    font-size: 4rem;
    line-height: 1;
    font-weight: 900;
    margin: auto;
    color: #fff;

    mix-blend-mode: overlay;
}

/* Duotone */
.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 preset */
.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.65) 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 */
.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;
}
.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);
}