cv-portfolio/css/sections/projects.scss

.projects-wrapper {
    display: grid;
    grid-gap: var(--gap) var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    .project {
        will-change: auto;

        &-info {
            position: relative;
        }

        &-more {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 100px;
            font-size: 60px;
            text-align: center;
            opacity: 0;
            visibility: hidden;
            background: rgba(11, 122, 117, 0.5);
            transition: all 0.4s ease;
        }

        &-image img {
            width: 100%;
            height: auto;
        }

        &-name {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(51, 59, 72, 0.5);
            padding: 10px var(--gap-s);
            text-shadow: 1px 1px 1px var(--dark-darker);
            transition: all 0.4s ease;
        }

        > .tags {
            background: var(--dark-lighter);
            padding: var(--gap-s);
            font-size: 12px;
            transition: all 0.4s ease;

            .tag {
                background: var(--dark);
                padding: 10px;

                &:not(:last-child) {
                    margin-right: 5px;
                }
            }
        }

        &:hover {
            cursor: pointer;

            .project-more {
                opacity: 1;
                visibility: visible;
                transition: all 0.4s ease;
            }

            .project-name {
                background: rgba(11, 122, 117, 0.5);
                transition: all 0.4s ease;
            }

            > .tags {
                background: var(--green);
                transition: all 0.4s ease;
            }
        }
    }
}

.projects-modals {
    .project-modal {
        position: fixed;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: rgba(51, 59, 72, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;


        &.open {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        &__inner {
            position: relative;
            background-color: var(--dark);
            padding: var(--gap);
            border: 2px solid var(--green);
            cursor: initial;

            @media screen and (max-width: 919px) {
                width: calc(100% - 100px);
                height: calc(100% - 100px);
                margin: 70px auto 5%;
                transform: translateY(-50%);
                top: 50%;
            }

            @media screen and (min-width: 920px) {
                margin: 5% auto;
                width: 80%;
                height: 100%;
                max-height: 80%;
                max-width: 1720px;
            }

            .close-modal {
                position: absolute;
                top: 0;
                right: 0;
                width: 40px;
                height: 40px;
                font-size: 38px;
                line-height: 34px;
                text-align: center;
                background: var(--green);
                cursor: pointer;
            }
        }

        &__wrapper {
            @media screen and (max-width: 919px) {
                height: 100%;
                overflow: auto;
            }

            @media screen and (min-width: 920px) {
                display: flex;
                height: 100%;
            }
        }

        &__image {
            @media screen and (min-width: 920px) {
                width: 100%;
            }

            .project-image,
            img {
                height: auto;

                @media screen and (min-width: 920px) {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                }
            }
        }

        &__content {
            position: relative;
            width: 100%;
            overflow: auto;

            @media screen and (min-width: 920px) {
                margin-left: var(--gap);
                margin-bottom: 60px;
            }

            .green-tag {
                background: #0B7A75;
                padding: 2px 5px;
                font-size: 12px;
            }

            > p {
                margin-top: var(--gap-s);
            }

            + .tags {
                width: 100%;
                font-size: 12px;
                transition: all 0.4s ease;

                @media screen and (min-width: 920px) {
                    position: absolute;
                    bottom: var(--gap);
                    right: var(--gap);
                    max-width: calc(50% - 30px);
                }

                @media screen and (min-width: 1010px) {
                    max-width: calc(50% - 60px);
                }

                .tag {
                    display: inline-block;
                    background: var(--dark-lighter);
                    padding: 5px 10px;

                    &:not(:last-child) {
                        margin-right: 5px;
                    }
                }
            }
        }

        &__arrow {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            background: var(--green);
            z-index: 2;
            cursor: pointer;
            transform: translateY(-50%);

            &:before {
                display: inline-block;
                width: 40px;
                height: 40px;
                color: var(--light);
                font-size: 32px;
                font-weight: bold;
                line-height: 36px;
                text-align: center;
            }

            &.prev {
                left: -40px;

                &:before {
                    content: '<';
                }
            }

            &.next {
                right: -40px;

                &:before {
                    content: '>';
                }
            }
        }

        &:first-child {
            .project-modal__arrow.prev {
                display: none;
            }
        }

        &:last-child {
            .project-modal__arrow.next {
                display: none;
            }
        }
    }
}