@media (max-width: 1280px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #portfolio {
        display: block;
        width: 100%;
        min-height: 100vh;
    }

    #portfolio > section {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
    }
}

@media (min-width: 769px) and (max-width: 1280px) {
    .why-me-next-link,
    .skills-next-link,
    .projects-next-link,
    .references-next-link,
    .next-section-link {
        display: none;
    }
}

@media (max-width: 768px) {
    #portfolio,
    main,
    .contact-section {
        height: max-content;
    }

    #portfolio > section {
        width: 100%;
        height: auto;
        min-height: auto;
        /* padding: 32px; */
    }
    
    .hero-section,
    .why-me-section,
    .skills-section,
    .work-section,
    .references-section,
    .contact-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    .why-me-title,
    .skills-title,
    .work-title,
    .contact-title {
        writing-mode: horizontal-tb;
        transform: none;
        align-self: flex-start;
        font-size: 36px;
        margin: 0;
    }

    .why-me-next-link,
    .skills-next-link,
    .projects-next-link,
    .references-next-link,
    .next-section-link {
        display: none;
    }

}