.game-media{
    position: relative;
    
    width: calc(100% - 2rem);
    margin: 1rem 1rem;
    padding-bottom: 1rem; 
	float: none !important; 
    
    /* border-bottom: 2px solid var(--games-border-line); */
}
.game-media:has(.description){
    padding-bottom: 0; 
}
.game-media .description{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    font-family: LexendDeca-Regular;
}
.game-media .line{
    position: relative;
    height: 2px;
    width: 100%;
    max-width: 80rem;
    background-color: var(--games-border-line);
    margin: 3rem auto 0 auto;
}
.game-media .media-container{
    display: flex;
    justify-content: center;
    width: 100%;
}
.game-media .carousel{
    max-width: 90rem;
    width: 100%;
}
.game-media .collage-container{
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}
.game-media .image-collage{
    width: 100%;
    max-width: 70rem;
    
}
.game-media .header{
    text-align: center;
    margin-bottom: 1rem;
}

.game-media .header-title{
    font-size: 3rem;
    font-weight: bold;
    font-family: Poppins-Bold;
    color: var(--games-media-header-title);
    margin-bottom: 1rem;
}

.game-media .header .button-group{
    width: 40%;
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: center;
}

.game-media .header .btn{
    width: 80%;
    height: auto;
    white-space: nowrap;
    font-weight: bold;
    min-width: 3rem;
    border-color: var(--games-border-line);
    border-width: 2px;
    margin: -2px 0 0 -2px;
    border-radius: 0;
    color: var(--games-dropdown-title);
    --bs-btn-focus-shadow-rgb: 49,132,253;
}
.game-media .header .button-group label.btn:first-of-type{
    border-radius: 50px 0 0 50px;
}
.game-media .header .button-group label.btn:last-of-type{
    border-radius: 0 50px 50px 0;
}
.game-media {
    .btn-check:checked + .btn, 
    .btn.active, .btn.show, 
    .btn:first-child:active, :not( .btn-check) + .btn:active {
        color: var(--games-button-text) !important;
        background-color: var(--games-button) !important;
        border-color: var(--games-button) !important;
    }
}

.disable img{
    opacity: 50%;
}
@media (max-width: 1490px) {
    .game-media .header-title{
        font-size: 2.5rem;
    }
    .game-media .header .btn{
        font-size: 1rem;
    }
}


@media (max-width: 700px) {
    .game-media .header-title{
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    .game-media .header .btn{
        font-size: 0.6rem;
    }
    
    .game-media .header label.btn{
        white-space: wrap !important;
    }
    .game-media .header label.btn:only-child{
        width: 80%;
        
    }
    
}

@media (max-width: 500px) {
    .game-media .header .btn{
        font-size: 0.55rem;
        /* padding: 0.20rem 0.8rem 0.20rem 0.8rem; */
    }
}


@media (max-width: 390px) {
    .game-media .header .btn{
        font-size: 0.5rem;
        /* padding: 0.25rem 0.5rem 0.25rem 0.5rem; */
    }
}

@media (max-width: 330px) {
    .game-media .header .btn{
        font-size: 0.4rem;
    }
}

@media (hover: hover) and (pointer: fine){
    .game-media .header .btn:hover{
        color: var(--games-button-text);
        background-color: var(--games-button);
        border-color: var(--games-button);
    }
}