.btn-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-button {
    font-size: 20px;
    display: flex;
    align-items: center !important;
    justify-content: center;
    gap: 1rem;
    border-radius: 99px;
    text-decoration: none;
    padding: 1rem 2rem;
    width: 100%;
    
    p {
        margin: 0 !important;
        font-weight: 600;
    }
    
    .btn-img {
        height: 25px;
    }

    &.primary {
        color: #fff;
        background: #194337;
    }

    &.white {
        color: #194337;
        background: #fff;
    }
    &.outlined {
        color: #194337;
        background: transparent;
        border: 2px solid #194337;
    }
}

#projets {
    font-family: "Raleway", sans-serif;

    .projets-container {
        max-width: 95%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 4rem 0;

        .element {
            width: 100%;
            height: 500px;
            position: relative;
            border-radius: 40px;
            overflow: hidden;
            padding: 0 0 1rem;

            .content-projet {
                position: relative;
                z-index: 3;
                color: #fff;
                padding: 0 1rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                align-items: center;
                justify-content: flex-end;
                height: 100%;
                text-align: start;
                transition: all .3s ease-in-out;

                h3 {
                    font-size: 45px;
                    margin: 0;
                    width: 100%;
                    color: #fff;
                    font-weight: 900;
                    line-height: 1;
                }

                p {
                    font-size: 20px;
                    line-height: 1.3;
                    margin-top: 0;
                }
            }

            img:not(.btn-img) {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right;
            }

            &:not(.yellow) {
                &:after {
                    content: "";
                    transition: all .3s ease-in-out;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: linear-gradient(to top, #0b1e19 30%, transparent);
                    z-index: 2;
                }
            }

            &.yellow {
                max-height: 200px;
                background: #E3BB43;
            }
        }

        .first-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 2rem;

            .element-block-1,
            .element-block-2 {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2rem;
                width: 100%;
            }
        }

        .second-row {
            .element-block-1 {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: 2rem;
            }
        }
    }

}

@media screen and (min-width: 768px) {
    #projets {
        .projets-container {
            max-width: 768px;
            .first-row {
                display: grid;
                grid-template-columns: repeat(1, 1fr);

                .element-block-1 {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(1, 1fr);

                    .element:first-child {
                        grid-column: span 2;
                        max-height: 300px;
                    }

                    .element:not(:first-child) {
                        grid-column: span 1;
                        max-height: 300px;

                        h3 {
                            font-size: 45px;
                        }
                    }
                }

                .element-block-2 {
                    display: grid;
                    grid-template-columns: repeat(1, 1fr);

                    .element {
                        grid-column: span 1;
                        max-height: 300px;
                    }
                }
            }
        }
    }
}


@media screen and (min-width: 991px) {
    #projets {
        .projets-container {
            max-width: 991px;

                .element {
                    cursor: pointer;

                    &:after {
                        opacity: 0;
                    }

                    &:not(.yellow) {
                        .content-projet {
                            opacity: 0;
                        }

                        &:hover {
                            .content-projet {
                                opacity: 1;
                            }

                            img {
                                filter: blur(2px);
                            }

                            &:after {
                                opacity: 1;
                            }
                        }
                    }
                }
            .first-row {
                grid-template-columns: repeat(2, 1fr);


                .element-block-1 {
                    .element:first-child {
                        max-height: 300px;
                        p {
                            margin: 0;
                        }
                    }
                    .element:not(:first-child) {
                        max-height: 300px;
                        
                        h3 {
                            font-size: 40px;
                        }

                        p {
                            font-size: 18px;
                        }
                    }
                }

                .element-block-2 {
                    .element {
                        min-height: 620px;
                    }
                }
            }

            .second-row {
                .element-block-1 {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 2rem;
                    max-height: 220px;

                    .element,
                    .element:not(.yellow) {
                        max-height: none;
                        height: 100%;
                        
                        h3 {
                            line-height: 1.8;
                        }
                        
                        p {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    #projets {
        .projets-container {
            max-width: 1200px;

            .second-row {
                .element-block-1 {
                    grid-template-columns: repeat(3, 1fr);

                    .element:not(.yellow) {
                        grid-column: span 2;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1440px) {
    #projets {
        .projets-container {
            max-width: 1440px;
        }
    }
}