/* 基本的なgradientを作成する */
.gradient-box {
    aspect-ratio: 3/2;
}
.linear-gradient {
    background-image: linear-gradient(45deg, blue, aqua);
}
.radial-gradient {
    background-image: radial-gradient(aqua 0%, blue 100%);
}
.conic-gradient {
    background-image: conic-gradient(blue, aqua);
}

/* ハードストップの例 */
/* 左上と右上に斜めのcutを入れる */
.linear-stop {
    background-image: linear-gradient(
        30deg,
        navy 15%,
        skyblue 15%,
        skyblue 85%,
        navy 85%
    );
}
/* くっきりとした円を描画 */
.radial-stop {
    background-image: radial-gradient(circle, navy 25%, skyblue 25%);
}
/* 円graph風 */
.conic-stop {
    background-image: conic-gradient(
        navy 0deg 120deg,
        skyblue 120deg 210deg,
        plum 210deg
    );
}

/* 複雑な柄の例 */
/* 斜めstripe */
.gradient-stripe {
    background-image: repeating-linear-gradient(
        60deg,
        pink 0 6px,
        transparent 6px 12px
    );
}

/* ripples */
.gradient-ripples {
    background-image: repeating-radial-gradient(
        circle,
        skyblue 0 0.25em,
        transparent 0.25em 1em
    );
    background-position: center;
}

/* .gradient-dot */
.gradient-dot {
    background-image: radial-gradient(circle, skyblue 40%, transparent 40%);
    background-size: 1em 1em;
    background-position: center;
}

/* 市松模様 */
.gradient-ichimatsu {
    --ichimatsu-color: forestgreen;

    background-image: conic-gradient(
        var(--ichimatsu-color) 25%,
        transparent 0% 50%,
        var(--ichimatsu-color) 50% 75%,
        transparent 75%
    );
    background-size: 40px 40px;
}

/* check */
.gradient-checkered {
    --check-color: rgb(120 200 200 / 0.4);
    background-image: linear-gradient(
        transparent 0 50%,
        var(--check-color) 50% 100%
    ),
    linear-gradient(90deg, transparent 0 50%, var(--check-color) 50% 100%);
    background-size: 20px 20px;
    background-position: 5px 5px;
}

/* 見出し装飾の例 */
/* under line gradient color */
.h-grad-01 {
    padding-bottom: 8px;
    position: relative;
}
.h-grad-01::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #4daeff, #96ffba 100%);
    border-radius: 6px;
}

/* 2 color block */
.h-grad-02 {
    position: relative;
    padding-left: 20px;
}
.h-grad-02::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 12px;
    height: 100%;
    background: linear-gradient(#52acff 0 50%, #ff8bf9 50% 100%);
    border-radius: 1px;
}

/* marker */
.marker-01 {
    padding: 0.125em;
    padding-inline: 1px;

    background: linear-gradient(
        0deg,
        #ffdd76,
        transparent 0.5em
    );
}

.marker-02 {
    padding-bottom: 0.125em;
    padding-inline: 1px;

    background-image: repeating-linear-gradient(
        -45deg,
        #ffdd76,
        transparent 2px 4px
    );

    background-repeat: no-repeat;

    background-position: left bottom;
    background-size: 100% 0.875em;
}

/* 画像とgradient */
.img-frame {
    aspect-ratio: 16/9;
    display: grid;
}
.img-frame > * {
    grid-area: 1 / 1;
}
.img-frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* black gradient */
.overlay-caption {
    font-size: 0.9em;
    align-self: end;
    padding: 1em 0.75em 0.75em;
    text-align: center;
    color: #fff;

    background: linear-gradient(
        0deg,
        rgb(0 0 0 / 0.8) 0.5em,
        transparent 100%
    );
}

.layer-black-fade {
    background: linear-gradient(90deg, rgb(0 0 0) 1em, transparent 80%);
}

.layer-text {
    align-self: center;
    color: #fff;
    padding: 1.5em;
    z-index: 0;
}
.layer-text > div {
    font-size: 2em;
}
.layer-text > p {
    font-size: 0.9em;
}

/* dot filter */
.layer-black-dot {
    background-image: radial-gradient(
        circle,
        rgb(0 0 0 / 50%) 1px,
        rgb(0 0 0 / 10%) 0%
    );
    background-size: 3px 3px;
}

.layer-text{}

.layer-black-dot + .layer-text {
    text-shadow: 0 0 1em rgb(0 0 0 / 50%);
}