.gameDetail {
    display: flex;
    flex-direction: row;
}

.nameContainer {
    font-size: 2em;
    font-weight: 600;
}

.backgroundImageContainer {
    position: relative;
    width: 100%;
    height: 50%;
    max-height: 320px;
    padding: 15px;
    margin: auto;
}

.metacriticContainerPosition > .metacritic__container {
    height: 40px;
    width: 40px;
    font-size: 1.3em;
    top: 4px;
}

.background_image, .background_image > .vignetteImage {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 290px;
}

.categoryContainer {
    max-width: 100%;
    width: 100%;
    margin: 15px 0;
}

.gameScreenshotList {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
}
.vignetteImage {
    border-radius: 25px;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.vignettesContainer {
    width: 100%;
    margin: 15px 0;
}

.vignettesContainer .screenshotButton {
    height: 35px;
    width: 35px;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--main-accent-red-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.vignettesContainer .screenshotButton:active {
    transform: scale(0.7) rotate(444deg);
}

.vignettesContainer .imageContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.vignettesContainer .imageContainer .vignetteImage {
    width: 100%;
    max-width: 130px;
    display: inline;
    min-height: 80px;
    object-fit: fill;
    border-radius: 15px 15px 15px 15px;
    margin: auto 7px;
}

.partOneDetailContainer {
    position: relative;
    width: 45%;
}

.plateformsAndLikeContainer {
    width: 20%;
    position: relative;
}

#scrollingPartOneDetailContainer, #scrollingPlateformsAndLikeContainer {
    position: absolute;
    top: 0;
}

.partTwoDetailContainer {
    width: 55%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 1.1em;
    padding: 20px;
    line-height: 1.44em;
}

.mainDescriptionContainer {
    width: 95%;
    padding: 0px 20px;
    text-align: justify;
}

.plateformsContainer {
    padding: 20px 0 0 0;
    font-weight: 600;
    font-size: 0.8em;
    width: 100%;
    min-width: 100px;
}

.FavoriteButtonContainerDetailPage {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px auto;
}

.FavoriteButtonContainerDetailPage .favoritesButton__container {
    position: static;
    transform: none;
}

.mainDescriptionContainer .descriptionContainer p br {
    content: "";
    margin: 20px;
    display: block;
}

@media screen and (max-width: 1100px) {
    .gameDetail {
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    #scrollingPartOneDetailContainer, #scrollingPlateformsAndLikeContainer { 
        position: static;
    }

    .nameContainer {
        padding-left: 44px;
    }

    .partOneDetailContainer {
        width: 100%;
    }
    
    .partTwoDetailContainer {
        width: 100%;
    }

    .backgroundImageContainer {
        max-width: 50%;
        min-width: 300px;
    }

}

@media screen and (max-width: 544px) {
    
    .partTwoDetailContainer {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .nameContainer {
        text-align: center;
        padding: 0;
    }

    .mainDescriptionContainer {
        padding: 0;
    }

    .plateformsAndLikeContainer {
        max-width: 300px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        
    }
    .vignettesContainer {
        margin: 15px 0;
        padding: 0 5px;
    }

    .vignettesContainer .imageContainer .vignetteImage {
        width: 100%;
        max-width: min(90%, 130px);
        display: inline;
        min-height: 80px;
        object-fit: fill;
        border-radius: 15px 15px 15px 15px;
        margin: auto 7px;
    }

    .vignettesContainer .screenshotButton {
        height: 25px;
        width: 25px;
    }

}

@media screen and (max-height:1400px) {
    .vignettesContainer .imageContainer .vignetteImage {
        display: inline;
    
    }
}