body {
    main {
        background-color: $DarkBlueMain;

        #mainContent {
            @include max(90rem, 0 auto, 0rem 5rem, transparent);
            @include flex(flex, center, center, column);

            .gridItems2 {
                margin-bottom: 8.125rem;
                max-width: 55rem;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 4.875rem 9.375rem;

                .item1 {
                    text-align: center;
                    gap: 1.25rem;
                    width: 21.8125rem;
                    height: 13.375rem;
                    @include flex(flex, center, center, column);

                    .title {
                        @include font('Raleway', normal, 700, 1.25rem, 1.4375rem, $white);
                        &:hover {
                            color: $hover
                        }
                    }

                    p {
                        @include font('Raleway', normal, 400, 0.875rem, 1.3125rem, $white);
                    }
                }

                .item2 {
                    @extend .item1;
                }

                .item3 {
                    @extend .item1;
                }

                .item4 {
                    @extend .item1;
                }
            }

            .stayProductive {
                @include flex(flex, center, space-evenly, row);
                flex-wrap: wrap;
                gap: 3.125rem;

                .image img {
                    width: 38.4225rem;
                    height: 28.9769rem;
                }

                .text {
                    width: 35.1875rem;
                    height: 17.625rem;
                    @include flex(flex, flex-start, flex-start, column);
                    gap: 1.25rem;

                    h2 {
                        @include font('Raleway', normal, 700, 2.5rem, 3.125rem, $white);
                        &:hover {
                            color: $hover;
                        }
                    }

                    p {
                        @include font('Open Sans', normal, 400, 1rem, 1.5rem, $white);
                    }

                    a {
                        @include flex(flex, center, center, row);
                        gap: 0.625rem;
                        @include font('Open Sans', normal, 400, 1rem, 1.375rem, $Cyan);
                        border-bottom: 0.0625rem solid $Cyan;
                        text-decoration: none;
                    }
                }
            }

            .gridItems3 {
                width: 73.75rem;
                height: 16.1875rem;
                @include flex(flex, center, center, row);
                gap: 0 2.5rem;
                padding: 17.0625rem 0 23.3125rem 0;
                background: url("../images/bg-quotes.png") no-repeat;
                background-position: 0rem 8.4375rem;

                .item1 {
                    width: 22.5rem;
                    height: 12.5rem;
                    background-color: $DarkBlueProfile;
                    @include font('Open Sans', normal, 400, 0.875rem, 1.3125rem, $white);
                    padding: 2.1875rem 1.25rem;
                    box-shadow: 0.3125rem 0.3125rem 0.5rem 0.25rem rgba(56, 56, 56, 0.0991282);
                    border-radius: 0.2458rem;

                    .profile {
                        @include flex(flex, center, flex-start, row);
                        margin-top: 1.375rem;

                        img {
                            width: 1.5rem;
                            height: 1.5rem;
                            border-radius: 50%;
                        }

                        .text {
                            @include flex(flex, flex-start, flex-start, column);
                            padding-left: 0.625rem;
                            gap: 0.25rem;

                            .name {
                                @include font('Open Sans', normal, 700, 0.625rem, 0.75rem, $white);
                                &:hover {
                                    color: $hover
                                }
                            }

                            p {
                                @include font('Open Sans', normal, 400, 0.4375rem, 0.625rem, $white);
                            }
                        }
                    }
                }

                .item2 {
                    @extend .item1;
                }

                .item3 {
                    @extend .item1;
                }
            }
        }
        #card {
            padding: 20px;
            width: 100%;
            max-width: 25rem;
            height: 9.375rem;
            font-size: 1.25rem;
            color: #000;
            position: absolute;
            bottom: 10%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: $linear-button;
            border-radius: 0.9375rem;
            opacity: 0;
            @include flex(flex, center, center, column);
            gap: 0.625rem;
            z-index: 5;
            text-align: center;

            p {
                font-size: 1.125rem;
            }

            button {
                width: 12.5rem;
                height: 3rem;
                background: $white;
                box-shadow: 0.125rem 0.1875rem 0.375rem rgba(7, 4, 59, 0.157043);
                border-radius: 1.5rem;
                @include font('Raleway', normal, 700, 0.875rem, 1rem, #000);
                border: none;
                cursor: pointer;

                &:hover {
                    background: $hover;
                }
            }
        }
    }
}