@import "../styles";

.c-modal.m-testimonial {
    & .--modal-container {
        @apply pt-80 pb-48 md:px-48 px-20;
        & .--modal-content {
            width: 100%;
            max-width: 780px;
            min-height: auto;
            @apply p-0;
            @apply relative;
            @apply overflow-visible;
            @apply bg-backgroundColorA;
            @apply shadow-lgZ1 rounded-8;
        }
    }
    .avatar-group {
        @apply absolute mb-24 flex items-center gap-8;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        & .c-avatar {
            width: 80px;
            height: 80px;
            filter: drop-shadow(
                0px -5px 42px rgba(var(--shadowColorMain), 0.3)
            );
        }
    }
    & .testimonial-section {
        @apply px-48 py-32;

        & .content {
            @apply md:text-31 text-25;
            @apply leading-150 text-textColor2 font-medium;
            @apply mt-32 mb-16;
        }
        & .student {
            @apply flex font-medium text-textColor5 mb-4;
            @apply md:text-h4 text-h5;
            & strong {
                @apply font-semibold text-textColor2;
            }
        }
        & .exercise {
            @apply flex items-center;
            @apply leading-160 text-textColor6;
            @apply md:text-17 text-14;
            @apply md:mb-16 mb-0;
            & strong {
                @apply font-medium;
                @apply mx-6;
            }
            & .c-track-icon {
                height: 32px;
                width: 32px;
                @apply mx-8;
            }
            & .track-title {
                @apply md:block hidden;
                @apply text-textColor2 font-semibold;
            }
        }
        & time {
            @apply md:block hidden;
            @apply text-16 leading-160 text-textColor6;
        }
    }
    & .c-share-panel {
        @apply px-48 pt-24 pb-32;
        @apply border-t-1 border-borderColor6;
    }
}
