aside {
    display: flex;
    justify-content: end;

    >section {
        position: relative;
        width: 150px;
        height: 150px;

        >figure {
            position: absolute;
            right: 0px;
            top: 5px;
            width: 140px;
            height: 90%;
            background-image: linear-gradient(to right, blueviolet, rgb(53, 170, 203), purple);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            z-index: 1;
            transition: 1s;

            >img {
                position: absolute;
                right: 5px;
                top: -8px;
                width: 95%;
                height: 95%;
                border-radius: 71% 29% 30% 70% / 70% 70% 30% 30%;
                margin-left: 14px;
                margin-top: 10px;
                transition: 2s;
            }



        }


        >div {
            backdrop-filter: blur(10px);
            margin-block: 34px;
            width: 0px;
            overflow: hidden;
            height: 85px;
            /* background-color: rgba(255, 255, 255, 0.145); */
            position: absolute;
            right: 120px;
            top: 0px;
            border-bottom-left-radius: 20px;
            border-top-left-radius: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            content-visibility: hidden;
            border: 1px solid white;
            transition: 1s;

            >* {
                color: white;
            }

            >p {
                width: 90%;
                font-size: 14px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                text-align: center;

            }

            >h4 {
                width: 90%;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                text-align: center;
            }

            >ul {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 95%;

                /* border: 2px solid red; */

                >li {
                    list-style-type: none;

                    >a {
                        /* background-color: rgb(226, 141, 43); */
                        padding-inline: 8px;
                        font-size: 30px;
                        text-decoration: none;
                        color: white;
                        transition: .4s;

                        &:hover {
                            color: rgb(53, 170, 203);
                            border-radius: 10px;
                        }
                    }
                }
            }
        }

        &:hover {
            width: 444px;

            >div {
                content-visibility: visible;
                width: 260px;
            }

            >figure {
                border-radius: 71% 29% 30% 70% / 70% 70% 30% 30%;

                >img {
                    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

                }
            }
        }
    }
}