.teacher-block {
    position: relative;
    overflow: hidden;
    padding: clamp(16px, 1.25vw, 32px);
    border: 1px solid $lightest-gray;
    cursor: pointer;

    .teacher-image {
        position: relative;

        &.shine {
            &::before {
                background: linear-gradient(to right,
                        fade_out(#fff, 1) 0%,
                        fade_out(#fff, 0.7) 100%);
                content: "";
                display: block;
                height: 100%;
                left: -75%;
                position: absolute;
                top: 0;
                transform: skewX(-25deg);
                width: 50%;
                z-index: 2;
                pointer-events: none;
            }

            @keyframes shine {
                100% {
                    left: 125%;
                }
            }
        }

        .social-plateform {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            top: 0px;
            z-index: 5;
            left: -24px;
            gap: 8px;
            -webkit-transition: .4s ease-out;
            -moz-transition: .4s ease-out;
            -ms-transition: .4s ease-out;
            -o-transition: .4s ease-out;
            transition: .4s ease-out;

            li {
                transition: .5s;
                visibility: hidden;
                opacity: 0;
                transform: translateX(-30px);

                a {
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    transition: $transition;
                    padding: 4px;

                    svg {
                        path {
                            fill: $black;
                            transition: $transition;
                        }
                    }
                }

                &:hover {
                    a {
                        svg {
                            path {
                                fill: $accent-2;
                                transition: $transition;
                            }
                        }
                    }
                }
            }
        }
    }

    .teacher-content {
        .h5 {
            color: $black;
            transition: $transition;
        }
    }

    &:hover {
        .teacher-image {
            &.shine {

                &:hover,
                &:focus {
                    &::before {
                        animation: shine 1s;
                    }
                }
            }

            .social-plateform {
                left: 0;
                top: 0;
                transition: $transition;

                li {
                    transform: none;
                    transition: .5s;
                    opacity: 1;
                    visibility: visible;

                    &:nth-child(1) {
                        transition-delay: 0.1s;
                    }

                    &:nth-child(2) {
                        transition-delay: 0.2s;
                    }

                    &:nth-child(3) {
                        transition-delay: 0.3s;
                    }

                    &:nth-child(4) {
                        transition-delay: 0.4s;
                    }
                }
            }
        }

        .teacher-content {
            .h5 {
                color: $accent-2;
                transition: $transition;
            }
        }
    }
}