@use "./../../../../variables" as *;

.more-proyects{
    .proyect-col{
        padding: 10px;
        height: 400px;

        .more-proyect-box {
            box-shadow: 0 10px 30px -15px rgba(2,12,27,0.7);
            -webkit-transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
            transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-align-items: flex-start;
            -webkit-box-align: flex-start;
            -ms-flex-align: flex-start;
            align-items: flex-start;
            position: relative;
            padding: 2rem 1.75rem;
            height: 100%;
            border-radius: 3px;
            -webkit-transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
            transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
            background-color: $LightNavy;
            cursor: pointer;

            &:hover {
                -webkit-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
                transform: translateY(-5px);
            }
            &:hover, &:focus {
                box-shadow: 0 20px 30px -15px rgba(2,12,27,0.7);
            }

            svg{
                width: 40px;
                height: 40px;
                color: $Green;
            }

            .other-proyect-title{
                margin: 0 0 10px;
                font-size: 22px;
                color: $LightestSlate;
            }

            .other-proyect-description{
                font-size: 17px;
                color: $LightSlate;
            }

            .more-proyects-skills{
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: flex-end;
                -webkit-box-align: flex-end;
                -ms-flex-align: flex-end;
                align-items: flex-end;
                -webkit-box-flex: 1;
                -webkit-flex-grow: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                padding: 0;
                margin: 20px 0 0 0;
                list-style: none;

                li{
                    font-size: 12px;
                    color: $Slate;
                    line-height: 1.75;
                    margin-right: 15px;
                    font-family: $CodeFont;
                    .underline{
                        padding-bottom: 3.5px;
                    }
                }
            }
        }
    }

}


@media(max-width: 1300px){
    .more-proyects{
        .proyect-col{
            height: auto;
        }
    }
}
