.clothes {
    & .content {
        margin-top: 80px;

        & .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);
        }
        
        & .queen {
            width: 80px;
            margin-top: 50px;
        }
        
        & .colors {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 250px;
            margin-inline: auto;
            gap: 20px;
            
            & .color {
                background-color: #fff;
                border-radius: 10px;
                box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 1px 1px hsl(0deg 0% 0% / 0.03), 0 2px 2px hsl(0deg 0% 0% / 0.03), 0 4px 4px hsl(0deg 0% 0% / 0.03), 0 8px 8px hsl(0deg 0% 0% / 0.03), 0 16px 16px hsl(0deg 0% 0% / 0.03);
                height: 60px;
                display: grid;
                place-content: center;
                font-family: sans-serif;
                
                & .inner {
                    display: grid;
                    place-content: center;
                    width: 107px;
                    height: 52px;
                    border-radius: 6px;
                }
            }
            
            & .color .gold {
                background-color: #FFD700;
            }
            
            & .color .pink {
                background-color: #FFC0CB;
            }
        }
    }
}