.container-carte{
    min-width: 150px;
    width: 15vw;
    aspect-ratio: 25/35;
    margin: max(2vw, 20px);
}

.container-carte:hover{
    box-shadow: 0 0 min(4vw, 4vh) yellow, 0 0 min(5vw, 5vh) yellow, 0 0 min(6vw, 6vh) yellow;
    transform: perspective(500px) rotateY(10deg);
    transition: transform 1s ease 0s;
}

.carte{
    width:100%;
    height: 100%;
    color: black;
    background: rgb(169,171,0);
    background: linear-gradient(348deg, rgba(255,219,22,1) 0%, rgba(255,255,62,1) 50%, rgba(259,219,22,1) 100%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: max(0.9vw, 9px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3.5fr 1fr 3.5fr 1fr;
    grid-template-areas: 'haut'
                         'images'
                         'pseudo'
                         'biographie'
                         'bas';
    border: 1px solid black; 
    outline: max(0.49vw, 4.9px) solid rgb(240,200,12);
    border-radius: max(1.2vw, 12px) 1px;
}

.item-1,.item-3,.item-5{
    margin: 0px max(0.9vw, 9px);
}

.item-1{
    grid-area: haut;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: max(0.98vw, 9.8px);
    margin-top: auto;
}

.item-1 .followers{
    background-color: #111111;
    border-radius: max(1vw, 10px);
    padding: 0 max(0.75vw, 7.5px);
    color: #f0c80c;
}

.item-2{
    grid-area: images;
}

.item-2 .banniere{
    width: 13.2vw;
    min-width: 132px;
    height: 6vw;
    min-height: 60px;
    margin: max(0.9vw, 9px);
    margin-top: max(0.3vw, 3px);
    border: solid max(0.15vw, 1.5px) white;
    border-radius: max(1.2vw, 12px) 1px;
    background-size: cover; 
    background-position: center;
}

.item-2 .profilepicture{
    width: 3.9vw;
    min-width: 39px;
    aspect-ratio: 1/1;
    margin-left: max(1.8vw, 18px);
    border: max(0.15vw, 1.5px) ridge yellow;
    border-radius: max(1.2vw, 12px) 1px;
    margin-top: max(-75px, -7.5vh);
    background-color: #222;
}

.item-3{
    grid-area: pseudo;
    display: flex;
    align-items: center;
    color: black;
    font-size: max(1.3vw, 13px);
    white-space : nowrap;
    overflow: hidden;
}
.item-4{
    grid-area: biographie;
    color:black;
    font-size: max(0.7vw, 7.5px);
    border: 1px solid black;
    border-radius: max(1.2vw, 12px) 1px;
    padding: max(0.9vw, 9px);
    background-color: rgba(255, 255, 255, 0.5);
    height: 0.6vw;
    min-height: 60px;
    width: 11.4vw;
    min-width: 114px;
    text-align: justify;
    margin: 0px max(0.9vw, 9px);
    overflow: hidden;
}
.item-5{
    grid-area: bas;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    font-size: max(0.6vw, 6px);
}

.item-5 .bas-droit{
    text-align: right;
}

.item-5 .bas-centre{
    text-align: center;
}

.item-5 .bas-centre img{
    height: max(0.6vw, 6px);
}