main {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
main div {
    display: flex;
    gap: 1em;
    border: 2px solid black;
    margin-bottom: 2em;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

/* === MOBIL === */
@media (max-width: 600px) {
    main div {
        flex-direction: column;
    }

    main div p {
        width: 100%;
    }
}

/* === DESKTOP HOVER === */
@media (hover: hover) {
    main div:hover,
    main div.active {
        background-color: rgb(68, 81, 69);
        transform: scale(1.05);
        border: 1.5px solid white;
    }
}


main div.hidden {
    opacity: 0.15;
    transform: scale(0.97);
}

main div:active {
    background-color: rgb(88, 99, 89);
}
main div.active {
        background-color: rgb(68, 81, 69);
}





/* Använder ai för att göra så att det ser mer "rent" ut. 
Ai hjälper mig även med med animationerna

*/