.com_peoples_section {
    width: 100vw;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 10vh;
    column-gap: 2.5vw;
    padding: 40vh 3vw 15vh 3vw;
    text-transform: lowercase;
    position: relative;
    align-items: center;
    justify-content: center;


    .work_type {
        width: 100vw;
        text-align: center;
        position: absolute;
        top: 20vh;
        left: 0;
        font-size: 1.5vw;
        text-transform: uppercase;
        font-weight: 600;
    }

    .person {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vw;

        .person_details_container {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 2.5vh;
            align-items: center;
            justify-content: center;

            .person_image {
                width: 30vw;
                height: 70vh;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }

            .person_details {
                display: flex;
                gap: 20vw;
                padding: 0 2.5vw;
                align-items: center;
                pointer-events: none;

                .person_name {
                    text-align: center;
                    font-size: 1.25vw;
                    font-weight: 600;
                    text-transform: uppercase;
                }

            }

        }

        .view_more_person_btn {
            width: max-content;
            margin-bottom: 4vh;
            text-decoration: none;
            font-size: 1.25vw;
            color: #000;
            cursor: pointer;
            text-align: center;
        }

    }

    .view_all_peoples_btn {
        position: absolute;
        bottom: 5vh;
        font-size: 1.25vw;
        font-weight: 500;
        text-decoration: none;
        color: #000;

        i {
            transform: rotate(-45deg);
        }

    }

}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    nav {
        display: none;
    }

    .mobile_nav {
        display: flex;
    }

    .com_peoples_section {
        grid-template-columns: 1fr 1fr;
        padding: 25vh 3vw 10vh 3vw;
        row-gap:5vh;
        column-gap: 5vw;

        .work_type {
            top: 15vh;
            font-size: 4.5vw;
        }

        .person {
            flex-direction: column;
            gap: 1vh;

            .person_details_container {

                .person_image {
                    width: 45vw;
                    height: 35vh;
                }

                .person_details {
                    gap: 45vw;

                    .person_name {
                        font-size: 3vw;
                    }

                    .person_shoot_date {
                        font-size: 5vw;
                        margin-top: 2vh;
                    }

                }

            }

            .view_more_person_btn {
                margin-bottom: 0vh;
                font-size: 3vw;
            }

        }

        .view_all_peoples_btn {
            bottom: 0vh;
            font-size: 4vw;
        }

    }


}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-device-width: 1028px) and (orientation: portrait) {
    nav {
        display: none;
    }

    .mobile_nav {
        display: flex;
    }

    .com_peoples_section {
        padding: 25vh 3vw;
        gap: 5vh;


        .work_type {
            top: 15vh;
            font-size: 4vw;
        }

        .person {
            flex-direction: column;
            gap: 2vh;

            .person_details_container {

                .person_image {
                    width: 94vw;
                    height: 50vh;
                }

                .person_details {
                    gap: 45vw;

                    .person_name {
                        font-size: 10vw;
                    }

                    .person_shoot_date {
                        font-size: 5vw;
                        margin-top: 2vh;
                    }

                }

            }

            .view_more_person_btn {
                margin-bottom: 0vh;
                font-size: 4vw;
                align-self: flex-start;
            }

        }

        .view_all_peoples_btn {
            bottom: 0vh;
            font-size: 4vw;
        }

    }


    footer {
        display: none;
    }

    .mobile_footer {
        display: flex;
    }

}

@media only screen and (min-width: 600px) and (max-device-width: 1028px) and (orientation: landscape) {
    footer {
        display: flex;
    }

    .mobile_footer {
        display: none;
    }
}