/* GSASP Modifications */
#availo .content {
    transform: translateX(50px);
    opacity: 0;
}
#projects article .phones {
    transform: translateX(-50px);
    opacity: 0;
}
/* === */

#projects article .phones {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    padding: 1.25rem 0rem;
    border: var(--border--default);
    border-radius: var(--borderRadius--default);

    background-position: center;
    /* Color of the grid cells bg */
    background-color: var(--surface--default);
    
    /* Use two linear gradients to create horizontal and vertical lines */
    background-image:
        /* Vertical lines (to the right) */
        linear-gradient(to right, var(--outline--default) 1px, transparent 1px),
        /* Horizontal lines (to the bottom) */
        linear-gradient(to bottom, var(--outline--default) 1px, transparent 1px);
    
    /* Size of each grid square */
    background-size: 24px 24px;
}

#projects article .phones img {
    position: relative;
    opacity: 0;
    transform: translateY(150px);
    width: 150px;
    height: 312px;
}

#projects article .phones img.levitate:nth-child(1) {
    animation: levitate 3s ease-in-out infinite;
}
#projects article .phones img.levitate:nth-child(2) {
    animation: levitate 3s ease-in-out infinite;
    animation-delay: .5s;
}

#projects article .phones #phoneUnder {
    margin-right: -24px;
}
#projects article .phones #phoneUnder.transformed {
    transform: rotate(-4deg);
}
#projects article .phones #phoneOver {
    margin-left: -24px;
}
#projects article .phones #phoneOver.transformed {
    transform: rotate(4deg);
}

@media screen and (max-width: 1000px) {
    #projects article .phones {
        width: 100%;
        max-width: 500px;
    }
}

@media screen and (max-width: 750px) {
    #projects article {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 500px) {
    #projects article .phones {
        max-width: 100%;
    }

    #projects article .phones img {
        width: 100px;
        height: 212px;
    }
}

#availo .content {
    position: relative;
}

/* === */

@keyframes levitate {
    0% { top: 0rem; }
    50% { top: .25rem; }
    100% { top: .0rem; }
}