.clothes {
    & .content {

        & .hanger {
            width: 100px;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 0;
            transform: translateX(-20px);
        }

        & .hanger.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        & p {
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 0;
            transform: translateX(-20px);
        }

        & p.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        .code {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: fit-content;
            margin-inline: auto;
            opacity: 0;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            transform: translateX(-20px);

            & .ellos,
            & .ellas {
                & .tie,
                & .high-heel-shoes {
                    width: 50px;
                }
            }
        }

        .code.animate-in {
            opacity: 1;
            transform: translateX(0);
        }
    }
}