.proj-div {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 15px;
    margin: auto;

    .proj {
        box-sizing: border-box;
        margin: 0 0 45px;

        .text-div {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 15px;
            column-gap: 25px;
            padding: 0 0 15px;

            h2 {
                color: var(--secondary);
                margin: 10px 0;
            }

            button a {
                color: var(--font)
            }

            button:active a {
                color: var(--accent)
            }
        }

        .icon-div {
            display: flex;
            justify-content: right;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 15px;
            column-gap: 15px;
            padding: 0 15px 15px;

            .view {
                color: var(--subtitle)
            }

            .icon svg {
                width: 21px;
                height: 21px;
            }

            .icon.selected {
                background-color: var(--menu)
            }

            .icon:active svg {
                fill: var(--accent);
            }
        }

        .img-div.grid,#img-div.grid {
            display: grid;
            gap: 15px;

            .pro {
                margin-bottom: 15px;

                img {
                    display: block;
                    width: 100%;
                    transition: filter .2s ease-in-out;
                    border-radius: 5px            ;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    -ms-border-radius: 5px;
                    -o-border-radius: 5px;
                }

                h3 {
                    text-align: center;
                    margin: 15px 0 0;
                    color: var(--font)
                }
            }

            a:hover img {
                filter: brightness(70%);
            }

            a:active h3 {
                color: var(--accent)
            }

            .list-text ul {
                display: none
            }

            .sub-div {
                margin: 10px 0 0;
                padding: 0 15px;
            }
        }

        #img-div.list {
            display: grid;
            gap: 15px;

            .pro {
                display: flex;

                a {
                    width: 100%;
                    display: flex;
                    gap: 25px;
                    border-radius: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    -ms-border-radius: 5px;
                    -o-border-radius: 5px;
                    transition: background-color .2s ease-in-out;
                    -webkit-transition: background-color .2s ease-in-out;
                    -moz-transition: background-color .2s ease-in-out;
                    -ms-transition: background-color .2s ease-in-out;
                    -o-transition: background-color .2s ease-in-out;
                    padding-right: 15px;

                    img {
                        display: block;
                        width: 200px;
                        transition: filter .2s ease-in-out;
                        border-radius: 5px            ;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        -ms-border-radius: 5px;
                        -o-border-radius: 5px;
                    }

                    .list-text {
                        h3 {
                            margin: 15px 0;
                            color: var(--font);
                        }

                        ul {
                            margin: 0;
                            padding-left: 12px;

                            li {
                                margin: 5px 0 0;
                                padding-left: 5px;
                                color: var(--subtitle)
                            }

                            li::marker {
                                content: "◆";
                                transition: color .2s ease-in-out;
                                -webkit-transition: color .2s ease-in-out;
                                -moz-transition: color .2s ease-in-out;
                                -ms-transition: color .2s ease-in-out;
                                -o-transition: color .2s ease-in-out;
                            }
                        }
                    }
                }

                a:hover {
                    background-color: var(--menu);
                    cursor: pointer;
                    transition: background-color .2s;
                    -webkit-transition: background-color .2s;
                    -moz-transition: background-color .2s;
                    -ms-transition: background-color .2s;
                    -o-transition: background-color .2s;

                    li::marker {
                        color: var(--scroll)!important;
                        transition: color .2s;
                        -webkit-transition: color .2s;
                        -moz-transition: color .2s;
                        -ms-transition: color .2s;
                        -o-transition: color .2s;
                    }
                }

                a:active h3 {
                    color: var(--accent)
                }

                .sub-div {
                    display: flex;
                    flex-direction: column;
                    justify-content: left;
                    align-items: start!important;
                    margin: 0;

                    .sub::before {
                        content: "◆";
                        color: var(--active);
                        margin-right: 5px
                    }

                    .dot {
                        display: none
                    }

                    p {
                        display: none
                    }

                }
            }
        }
    }
}

@media only screen and (min-width: 1200px) {
    .proj-div {
        max-width: 1800px;
        margin: auto;

        .text-div {
            padding-left: 15px!important
        }

        .img-div.grid,#img-div.grid {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }
}

@media only screen and (min-width: 1400px) {
    #img-div.list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {
    .proj {
        margin-bottom: 60px!important;

        .text-div {
            padding-left: 15px!important
        }

        .img-div.grid,#img-div.grid {
            grid-template-columns: 1fr 1fr;
        }
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    #img-div.list {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-div {
        justify-content: center
    }

    .proj {
        margin-bottom: 60px!important;

        .img-div.grid,#img-div.grid {
            grid-template-columns: 1fr;
        }
    }
}

@media only screen and (max-width: 1000px) {
    #img-div.list {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 500px) {
    .icon-div {
        display: none!important
    }
}