html{
    margin: 0% ;
    padding: 0%;
}

.content {
    transition: width .5s ease-out;
    width: 0%;
    display: block;
    overflow: hidden;
}

.cards{
    display: flex; width: 100%; outline: 4px solid greenyellow; height: 400px; gap: 10px;
}

.cards {
    label{background-color: bisque; height:100%;}
    .content{background-color: rgb(19, 194, 194); height: 100%; position: relative; flex-grow: 5;}
}

#games:checked ~ label[for="games"] + .content,
#assets:checked ~ label[for="assets"] + .content,
#tools:checked ~ label[for="tools"] + .content {
    width: 100%;
}