.experience {
    &-wrapper {
        &:hover {
            & .experience-content {
                transform: perspective(400px) rotateX(0deg);
            }
            & .experience-tag a {
                background: var(--main-600) !important;
            }
        }
    }
    &-thumb img {
        box-shadow: 0 9px 20px 0 rgba(50, 69, 93, 0.04);
        border: 3px solid hsl(var(--white));
    }
    &-content {
        background-color: hsl(var(--white));
        padding: 20px 25px;
        transform-origin: center;
        transition: all 0.5s ease-in-out;
        transform: perspective(400px) rotateX(-90deg);
        @include xl-screen {
            flex-wrap: wrap;
            row-gap: 10px;
            margin-inline-end: 12px;
        }
        &-inner {
            width: 237px;
            max-width: 100%;
        }
    }

}






.experience-four {
    &-area {
        clip-path: circle(71% at bottom);
        padding-block-start: 180px;
        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 97%;
            inset-block-end: 3px;
            inset-inline-start: 0;
            background: #f1ece5;
            z-index: -1;
            clip-path: circle(71% at bottom);
        }
    }
    &-active {
        &::before {
            content: "";
            position: absolute;
            width: 68px;
            height: 240px;
            inset-inline-start: -20px;
            inset-block-end: 0;
            background: #f1ece5;
            z-index: 2;
            rotate: -10deg;
            clip-path: polygon(0 0, 50% 0, 100% 50%, 100% 98%, 0 100%, 0% 50%);
            @include sm-screen {
                display: none;
            }
        }
        &::after {
            content: "";
            position: absolute;
            width: 68px;
            height: 240px;
            inset-inline-end: -20px;
            inset-block-end: 0;
            background: #f1ece5;
            z-index: 2;
            rotate: 10deg;
            clip-path: polygon(0 30%, 47% 0, 100% 0, 100% 98%, 0 100%, 0 100%);
            @include sm-screen {
                display: none;
            }
        }
    }
    &-thumb {
        & img {
            box-shadow: 0 9px 20px 0 rgba(50, 69, 93, 0.04);
            border: 3px solid hsl(var(--white));
            @include sm-screen {
                width: 100%;
            }
        }
    }
    &-content {
        margin-block-start: -60px;
        position: relative;
    }
}


