/* ---------- Flappy Duck ---------- */

/* --------------------------------- */

.flappy-project .image-side {
    display: flex;
    gap: 1rem;
    border-bottom: 4px solid #161616;
    border-radius: 1rem;
}

.flappy-project .image-side .logo {
    width: calc(780px / 2.5);
    height: calc(384px / 2.5);
    align-self: center;
    margin-top: 40px;
}

.flappy-project .image-side .smartphone {
    width: calc(523px / 2);
    height: calc(1074px / 2);
    align-self: center;
    transition: 0.3s;
    border-radius: 2rem;
}

.flappy-project .image-side .smartphone:hover {
    cursor: pointer;
    transform: scale(1.05);
    outline: 1px solid var(--black);
    outline-offset: 5px;
}

.flappy-project .image-side .bar {
    width: calc(144px * 1);
    height: calc(735px * 1);
    align-self: flex-end;
    z-index: 0;
}

.flappy-project .image-side .bar:nth-child(1) {
    transform: translateY(50%);
}

.flappy-project .image-side .bar:nth-child(3) {
    transform: translateY(30%);
}

@media only screen and (max-width: 1240px) {
    .flappy-project .image-side .logo {
        width: calc(780px / 3);
        height: calc(384px / 3);
    }
    
    .flappy-project .image-side {
        gap: 1rem;
    }

    .flappy-project .image-side .smartphone {
        width: calc(523px / 2.5);
        height: calc(1074px / 2.5);
        border-radius: 1.5rem;
    }

    .flappy-project .image-side .bar {
        width: calc(144px * 0.8);
        height: calc(735px * 0.8);
    }
}

@media only screen and (max-width: 768px) {
    .flappy-project .image-side .bar {
        display: none;
    }

    .flappy-project .image-side {
        border-bottom: none;
    }

    .flappy-project .image-side .smartphone {
        width: calc(523px / 4);
        height: calc(1074px / 4);
    }

    .flappy-project .description-side .description {
        font-size: 16px;
    }
}