.projects {
    margin-top: 9.375rem;

    .container {
        width: min(1785px, calc(100% - 40px));

        .title-wrapper {
            text-align: center;
        }

        .service-filter {
            display: flex;
            margin-bottom: 6.25rem;
            gap: .9375rem;
            margin-right: 9.375rem;

            .filter-button {
                padding: .625rem 1.25rem .875rem;
                border: 1px solid #1AE184;
                border-radius: 25px;
                font-weight: 600;
                color: #051D67;
                font-size: 1.25rem;
                transition: background-color 0.5s, color 0.5s;
            }

            .filter-button:hover {
                cursor: pointer;
            }

            .filter-button:hover,
            .filter-button.active {
                background-color: #051D67;
                color: #1AE184;
                border-color: transparent;
            }
        }

        .projects-wrapper {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-gap: 1.875rem;

            .image-wrapper {
                display: grid;
                height: 472px;
                overflow: hidden;
                
                > * {
                    grid-area: 1/1/-1/-1;
                }

                img {
                    transition: scale .5s;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .service-tag {
                    justify-self: flex-end;
                    align-self: flex-start;
                    color: #051D67;
                    font-weight: 700;
                    background-color: #fff;
                    margin: 1.25rem 0 0 1.25rem;
                    padding: .4375rem 1.25rem;
                    border-radius: 23px;
                    z-index: 3;
                }
            }

            .image-wrapper:hover img {
                scale: 1.2;
            }

            .project-name {
                margin-top: 3.125rem;
                font-size: 2.1875rem;
                font-weight: 600;
                color: #051D67;
            }

            .place-and-button {
                margin-top: .625rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;

                .place-name {
                    color: #051D67;
                    font-size: 1.25rem;
                }

                .circle {
                    display: inline-block;
                    /* margin: 15px auto 15px 15px; */
                    width: 2.5rem;
                    height: 2.5rem;
                    background-color: #1AE184;
                    border-radius: 23px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg {
                        width: 27px;
                    }

                    svg * {
                        fill: #051D67;
                    }
                }

                .button {
                    opacity: 0;
                    position: absolute;
                    left: 0;
                    transition: opacity .5s;
                }

                .button .circle {
                    background-color: #051D67;

                    svg * {
                        fill: #1AE184
                    }
                }
            }

            .place-and-button:hover > .circle {
                opacity: 0;
            }

            .place-and-button:hover .button {
                opacity: 1;
            }

            .project-button:hover {
                background-color: transparent;
                color: #051D67;

                .circle {
                    background-color: #051D67;

                    svg * {
                        fill: #1AE184;
                    }
                }
            }
        }

        .all-projects-button {
            margin-top: 5.75rem;
            display: grid;
            
            > * {
                grid-area: 1/1/-1/-1;
            }

            .linebreak {
                align-self: center;
                min-height: 1px;
                background-color: #051D67;
            }

            .button {
                align-self: center;
                justify-self: center;
                z-index: 3;
                background-color: #fff;
            }

            .button:hover {
                background-color: #051D67;
            }
        }
    }
}

@media (max-width: 1250px) {
    .projects {
        .container {
            .projects-wrapper {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    }
}

@media (max-width: 1023px) {
    .projects {
        .container {
            .service-filter {
                margin-right: 0;
                flex-direction: column;
            }

            .projects-wrapper {
                display: grid;
                grid-template-columns: minmax(0, 1fr);

                .image-wrapper {
                    height: auto;
                }
            }
        }
    }
}