.cover {
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: 7px;
}

.cover iframe {
    width: 100%;
    height: 63%;
}


.content {
    background-color: var(--yellow);

    color: var(--grey);
    width: auto;
    height: auto;
    padding: 20px;

    overflow-x: auto;
    display: block;

    text-align: justify;

}

.content img {
    max-width: 100%;
    max-height: 500px;
    display: block;
    margin: 30px auto;
    transition-duration: 100ms;
}

.content img:hover {
    scale: 1.05;
    transition-duration: 100ms;
}

@media screen and (orientation:portrait) {
    .content {
        width: auto;
    }
}

.projectInfo {
    display: none;

    width: auto;

    background-color: var(--orange);
    padding: 20px 10px;
    margin-bottom: 20px;

    border-color: var(--grey);
    border-style: solid;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
}

.projectContent {
    padding: 0 5%;
    width: auto;
}