Scss не получается выделить псевдоэлемент :before для наведения :hover

Хочу при наведении сделать анимация через микс блэнд, делаю по ютюбу, но там пишут в css, а у меня практика на scss. Помогите правильно сделать. заранее спасибо. html

            <!-- block-price -->

            <div class="price">
                <!-- 1 page -->
                <div class="price__page">
                    <div class="price__title"><h3>Сайт-визитка</h3></div>
                    <div class="price__descr">Быстрый старт
                        <br>
                        для бизнеса</div>
                    <div class="price__amount">от 1 000 000</div>
                    <div class="price__days">от 4 дней</div>
                </div>
                <!-- 2 page -->
                <div class="price__page">
                    <div class="price__title"><h3>Landing-page</h3></div>
                    <div class="price__descr">Одностраничный сайт
                        
                        <br>
                        продающий сайт</div>
                    <div class="price__amount">от 2 000 000</div>
                    <div class="price__days">от 4 дней</div>
                </div>
                <!-- 3 page -->
                <div class="price__page">
                    <div class="price__title"><h3>Сайт-каталог</h3></div>
                    <div class="price__descr">Многостраничный сайт
                        
                        
                        Уверенный старт</div>
                    <div class="price__amount">от 4 000 000</div>
                    <div class="price__days">от 10 дней</div>
                </div>
                <!-- 4 page -->
                <div class="price__page">
                    <div class="price__title"><h3>Интернет магазин</h3></div>
                    <div class="price__descr">Полноценное решение 
                        
                        
                        для продажи товаров и услуг</div>
                    <div class="price__amount">от 10 000 000</div>
                    <div class="price__days">от 35 дней</div>
                </div>
            </div>

scss

.price{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 266px;
    margin-top: 65px;
    text-align: center;
    color: $white-hover;
   
    &__page {
        width: 256px;
        height: 250px;
        background: rgba(247, 185, 21, 0.72);
        border-radius: 8px; 
        padding: 36px 33px;
        position: relative;
        &:before, &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            transition: .5s ease-in-out;
        }
        &:before {
            right: 0;
            bottom: -100%;
            background: rgba(255, 255, 255, 0.7);
            transform: skew(-45deg) translateX(100%)
        }
        &:after {
            left: 0;
            top: -100%;
            background: rgba(255, 255, 255, 0.7);
            transform: skew(135deg) translateX(-100%)
        }
        &:hover .price__page:before {
            transform: skew(-45deg) translateX(0%);

        }

    }
    &__title {
        font-weight: 700;
        font-size: 21px;  
    }
    &__descr {
        font-weight: 300;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
    }
    &__amount{
        font-weight: 700;
        font-size: 25px;
        line-height: 40px;
    }

}