@import url("../tokens.css");

.project-top-page {

    .overview-inner {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .overview-img img {
        max-width: 400px;
        flex: 1;
        border-radius: 10px;
    }

    .overview-text {
        flex: 1;
        text-align: left;
    }

    .projects-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .project-card {
        background-color: #d2e7f4;
        display: block;

        text-align: left;
        padding: 10px;
        border: solid 2px var(--c-primary);
        border-radius: 10px;
        width: calc(100%/3);

    }

    .project-img {
        background: #f5fafd;
        border-radius: 10px 50% 50% 10px;
        height: 300px;
        width: 100%;
        height: 300px;
        position: relative;
    }

    .img-infrastructure {
        position: absolute;
        width: 230px;
        bottom: 0;
        right: 0;
    }

    .img-solution {
        position: absolute;
        width: 230px;
        bottom: 0;
        right: 0;
    }

    .img-software {
        position: absolute;
        width: 230px;
        bottom: 0;
        right: 0;
    }


    .project-name {
        font-size: 20px;
        font-weight: bold;
        padding: 20px 10px 0;
    }

    .project-text {
        padding: 10px 10px 40%;
    }

    .project-btn {
        text-align: center;
        background: #ffffff;
        color: var(--c-primary);
        font-weight: bold;
        padding: 10px;
        margin: 20px 0 0;
        width: 100%;
        border-radius: 4px;
    }


    .project-card:hover .project-btn {
        background: var(--c-primary);
        color: #ffffff;
    }

    /* tablet
================================================*/

    @media screen and (min-width: 768px) {
        .project-card {
            width: calc(100% / 2);

        }
    }

    /* SP
================================================*/

    @media screen and (max-width: 767px) {

        .project-card {
            width: 100%;
        }

        .overview-img img {
            max-width: 100%;
        }

        .project-text {
            padding: 20px 10px 40%;
        }
    }
}


@media screen and (max-width: 500px) {

    .project-card {
        width: 100%;
    }
}