.container {
width: 100vw;
height: 100vh;
}
Ridimensiona il container usando come riferimento per la sua altezza il 100% dell'altezza del viewport (vh) e come larghezza il 100% della larghezza del viewport (vw). Può essere utile se vuoi creare un container che occupi tutta l'altezza della finestra.

-

.container {
display: flex;
justify-content: center;
align-items: center;
}
Centra qualunque elemento presente nel container sia in verticale che in orizzontale.

-

.container {
border: 1px solid gray;
}
.container .column:not(:last-child) {
border-bottom: 1px solid gray;
}
Attribuisce ad ogni colonna dentro al container, un border-bottom grigio, ad eccezzione dell'ultima. In questo modo si evita che l'ultima colonna abbia 2 border-bottom, una dell'ultima colonna ed una del container.

-

.column:hover:not(.active-class) {
background: gray;
}
Passando sopra con il mouse su una colonna, le verrà attribuito il colore di sfondo grigio, anche senza che essa abbia la classe .active-class. Questo è molot utile se attribuisci la classe .active-class ad una delle colonne e vuoi mostrare che puoi cliccare sulle altre ma non puoi su quella.

-

p::first-letter {
text-transform: capitalize;
}
Mette solo la prima lettera compresa in un

maiuscola.

-

.right-arrow {
transform: rotateY(180deg);
}
Inverte la freccia orizzontalmente, in questo caso se hai una sola immagine di una freccia che punta a sinistra otterrai anche una freccia che punta a destra.