/* -------------------
 Download
------------------- */

.download-list {
    margin-bottom: 12rem;
}

.download-section {
    margin-top: 8rem;

    > .title {
        font-size: var(--font-size28);
        font-family: var(--font-gothic2);
        letter-spacing: calc(-150 / 1000 * 1em);
        color: var(--color-main2);
        text-align: center;
        margin-bottom: 3.2rem;
    }

    > .list {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    @media screen and (min-width: 1024px) {
        margin-top: 10rem;

        > .title {
            font-size: var(--font-size38);
            margin-bottom: 4rem;
        }

        /* > .list {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 7rem;
        } */
    }

    @media screen and (min-width: 1240px) {
        > .list {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 7rem;
        }
    }
}

.download-card {
    padding: 1rem;
    display: grid;
    gap: 1.6rem;

    > .title {
        font-size: var(--font-size18);
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
    }

    > .image {
        text-align: center;

        > img {
            border: 1px solid #cccccc;
            border-radius: var(--radius-xxs);
        }
    }

    @media screen and (min-width: 1024px) {
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "img  title"
            "img  recommend"
            "img  links";
        column-gap: 3.2rem;
        row-gap: 1.6rem;

        > .title {
            grid-area: title;
            font-size: var(--font-size20);
            text-align: left;
        }

        > .image {
            grid-area: img;
        }

        > .download-recommend {
            grid-area: recommend;
        }

        > .download-link-area {
            grid-area: links;
        }
    }

    @media screen and (min-width: 1240px) {
        width: calc((100% - 7rem)/2);
    }
}

.download-recommend {
    background-color: #F4F7F8;
    padding: 2rem 2.4rem;
    border-radius: var(--radius-xxs);
    font-size: var(--font-size14);
    line-height: 1.5;

    > .title {
        font-weight: 600;
        color: var(--color-main2);
    }

    > ul {
        list-style: disc;
        padding-left: 2rem;
    }
    > ul li {
        margin-top: 0.8rem;
    }

    @media screen and (min-width: 1024px) {
        padding: 2.4rem 2.8rem;
        font-size: var(--font-size16);
    }
}

.download-link-area {
    display: grid;
    gap: 2.4rem;
    line-height: 1.5;

    > .text-link {
        font-size: var(--font-size16);
        text-decoration: underline;

        > i {
            margin-right: 1rem;
        }

        &:hover {
            color: var(--color-main2);
            text-decoration: none;
        }
    }

    > .p-button {
        font-size: var(--font-size16);
        letter-spacing: calc(50 / 1000 * 1em);

        > a {
            display: flex;
            justify-content: center;
            height: 5.6rem;
            gap: min(calc(24 / 390 * 100vw), 2.4rem);

            @media screen and (min-width: 1024px) {
                gap: min(calc(24 / 1600 * 100vw), 2.4rem);
            }
        }

        > a > .c-crop {
            line-height: 1.5;
        }

        > a img {
            text-shadow: 1.5px 1.5px 0 #A7E9B5;
        }
    }

    > .c-shadow {
        --shadow-x: 0.5rem;
        --shadow-y: 0.5rem;
    }
}