@media (max-width: 1400px) {
    .photo-strip {
        gap: 3.5rem;
    }
}

@media (max-width: 1345px) {
    .photo-strip {
        gap: 4rem;
    }
}

@media (max-width: 1200px) {
    .photo-strip {
        gap: 4.5rem;
    }
}

@media (max-width: 1180px) {
    .photo-strip {
        gap: 5rem;
    }
}

@media (max-width: 1150px) {
    .photo-strip {
        gap: 5.5rem;
    }
}




@media (max-width: 1050px) {
    .vertical-nav {
        display: none;
    }
    .photo-strip {
        position: relative;
        left: 0;
        justify-content: space-around;
        margin-bottom: 80px;
    }
    .photo-strip-side-left {
        display: flex;
        flex-direction: row;
        gap: clamp(50px, 10vw, 100px);
        margin-right: clamp(50px, 7vw, 150px);
        margin-left: clamp(20px, 4vw, 100px);
    }
    .photo-strip-content-column {
        display: flex;
        flex-direction: column;
    }
    .tags-row {
        margin-top: 0.5rem;
    }
}

@media (max-width: 963px) {
    .song-row {
        display: flex;
        flex-direction: column;
    }
    .song-card {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 850px) {
    .photo-strip {
        display: none;
    }
    .photo-row {
        position: relative;
        display: flex;
        gap: clamp(0.5rem, 3vw, 1rem);
        justify-content: center;
        align-items: center;
        transform: translateY(-40px);
        margin-bottom: -50px;
        z-index: 5;
    }
    .photo img {
        width: clamp(90px, 20vw, 130px);
        border-radius: 16px;
        object-fit: cover;

        transform: rotate(-4deg);
        transition: transform 0.35s ease;
    }

    .whoami-container, .skills-container, .project-container, .experience-container {
        max-width: clamp(200px, 70vw, 800px);
        margin: 0 auto;
    }
    .photo-strip-side-left {
        margin: 0 auto 0 auto;
    }

}

@media (max-width: 550px) {
    #contact-me p {
        display: none;
    }
}

@media (max-width: 470px) {
    .photo-row {
        display: none;
    }
    .phone-photo {
        display: block;
    }
    .header-row {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0;
    }
    /* the minor edu shit */
    .edu-grid {
        grid-template-columns: 1fr;
        gap: clamp(1rem, 1vw, 2rem);
    }
    .edu-secondary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}