@media screen and (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .service-card {
            flex-grow: 1;
            flex-basis: 400px;
            max-width: 500px;
        }
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding-bottom: 0;
    }

    .hero-section {
        .author-photo {
            min-height: 70vh;
            width: 70%;
        }

        .hero-content {
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
    }

    .resume-grid {
        grid-template-columns: 1fr;

        .resume-column {
            display: inherit;
            grid-template-columns: 1fr 1fr;

            & > :first-child {
                grid-column: span 2;
            }
        }
    }

    .about-section {
        .container {
            flex-direction: column;
            align-items: center;
            gap: 50px;

            .about-image {
                width: 100%;
                height: 50vh;
            }

            .about-content {
                width: 80vw;
                height: 50vh;
                
                #about-title {
                    margin-top: 0;
                    text-align: center;
                }

                .about-location {
                    text-align: center;
                }

                .about-actions {
                    justify-content: center;
                }
            }
        }
    }    
}

@media screen and (max-width: 640px) {
    .container {
        padding: 100px 40px 0;
    }

    header {
        position: fixed;
        background-color: var(--color-light-100);
        height: 60px;
        justify-content: left;
        align-items: center;

        .container {
            display: flex;
            justify-content: start;
            align-items: center;
        }

        .nav-menu {
            --nav-menu-width: clamp(200px, 50vw, 300px);
            position: fixed;
            top: 60px;
            left: calc( calc(var(--nav-menu-width) + 10px) * -1);
            height: calc(100vh - 60px);
            flex-direction: column;
            justify-content: flex-start;
            padding: 5vh 20px;
            width: var(--nav-menu-width);
            background-color: var(--color-light-100);
            transition: left 200ms ease-in-out 100ms;

            li {
                font-size: 1.5rem;
                color: var(--color-dark-500);
            }

            &.mobile-visible {
                left: 0;
                transition: left 200ms ease-in-out 100ms;
            }
        }

        .menu-toggle {
            display: inline-block;
            position: relative;
            cursor: pointer;
            width: 40px;
            height: 40px;
            background: none;
            border: none;

            .hamburger {
                --hamburger-color: var(--color-dark-500);
                position: absolute;
                width: 38px;
                height: 4px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: var(--hamburger-color);
                transition: 600ms ease-in-out;

                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: var(--hamburger-color);
                    top: 10px;
                    left: 0;
                    transition: 200ms ease-in-out 100ms;
                }

                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: var(--hamburger-color);
                    top: -10px;
                    left: 0;
                    transition: 200ms ease-in-out 100ms;
                }
            }

            &[aria-expanded="true"] {
                .hamburger {
                    transform: translate(-50%, -50%);
                    transition: 100ms ease-in;
                    background-color: white;
                    background-color: transparent;
                    
                    &::before {
                        left: 50%;
                        transform: rotate(-45deg) translate(-50%, -5px);
                    }

                    &::after {
                        left: 50%;
                        transform: rotate(45deg) translate(-50%, 5px);
                    }
                }
            }
        }
    }

    .hero-section {
        .author-photo {
            width: 100%;
        }
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .resume-grid {
        grid-template-columns: 1fr;
        gap: 0;

        .resume-column {
            display: flex;

            h3 {
                margin-top: 40px;
            }
        }
    }

    .about-section {
        padding-bottom: 100px;

        .container {
            .about-image {
                width: 100%;
                height: 30vh;
            }

            .about-content {
                width: 80vw;
                height: 50vh;
            }
        }
    }

    .testimonials-grid {
        .testimonial-card {
            margin-left: 0;
            margin-bottom: 80px;

            &::after {
                width: 0;
                height: 0;
                content: '';
                border-right: 40px solid var(--color-dark-300);
                border-top: 0 solid transparent;
                border-bottom: 70px solid transparent;
                position: absolute;
                transform: rotate(-30deg) translateY(-40px);
                left: 40px;
                top: 100%;
            }

            .testimonial-author {
                position: absolute;
                bottom: -80px;
                left: 70px;
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .author-avatar {
                position: relative;
                right: unset;
            }

            .author-info {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
        }
    }

    .contact-section .container {
        display: flex;
        flex-direction: column;
    
        .contact-details {
            margin-left: 0 !important;
        }
    }
}