Как сделать так, чтобы поле занимало всю ширину текста и отображало текст? ⇐ CSS

[Anonymous]

Я только начал изучать HTML 2 дня назад и наткнулся на кое-что, чего понятия не имею, как это сделать. У меня есть фрагмент текста, который создает поле с заголовком и небольшим количеством текста. При наведении на него мыши он увеличивается в 1,05 раза. Я хотел бы добавить функцию, которая, когда я нажимаю на поле, увеличивает его почти до всей ширины окна и отображает текст в поле. Я также хотел бы, чтобы он уменьшался, если я снова нажму на поле или нажму на другое поле. Как мне это сделать?

Код: Выделить всё

.games {
display: flex;
flex-wrap: wrap;
align-items: center;
/* background-color:  rgba(0, 0, 47,0.3); */
justify-content: space-evenly;
}

.game-list {
margin: 30px;
;
padding: 20px;
height: 275px;
width: 325px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid gray;
background: rgba(255, 75, 255, 0.1);
box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}

.game-list:hover {
transform: scale(1.05);
}

Код: Выделить всё

[img]https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg[/img]
Chapter 1: 
Step-by-Step

И этот код представляет собой функции CSS
(Кроме того, я хотел бы отметить, что я начал изучать CSS и HTML пару дней назад, поэтому, пожалуйста, немного уменьшите это, чтобы я мог понять)
Я пытался немного поискать, как это сделать, но по большей части я не понимал, то ли это, что я искал, или нет. Поэтому я обращаюсь сюда, чтобы получить прямой ответ.

Подробнее здесь: https://stackoverflow.com/questions/785 ... eveal-text