@media screen and (min-width: 768px) {
    .b-product {
        width: 100%;
    }
    
    .b-product .title {
        background: #da251d;
        color: #1d2051;
        font-size: 25px;
        padding: 30px 10px 8px;
        letter-spacing: 0.05em;
    }
    
    .b-product .c-button {
        background-size: cover;
        background-position: center;
        padding: 10px 0 0 10px;
        width: calc(100% - 10px);
        height: 250px;
        display: block;
    }
    
    .b-product .c-button::before {
        background: rgba(50, 50, 50, 0.5);
        backdrop-filter: blur(5px);
    }
    
    .b-product .c-button::after {
        right: 100%;
        top: 80%;
        background: white;
        width: 80%;
    }
    
    .b-product .c-button:hover::after {
        right: 0;
    }
}


@media screen and (max-width: 767px) {
    .b-product {
        width: 80vw;
    }
    
    .b-product .title {
        background: #da251d;
        color: #1d2051;
        font-size: 6vw;
        padding: 6vw 3vw;
    }
    
    .b-product .c-button {
        background-size: cover;
        background-position: center;
        height: 50vw;
        display: block;
    }
    
    .b-product .c-button::before {
        background: rgba(50, 50, 50, 0.5);
        backdrop-filter: blur(5px);
    }
    
    .b-product .c-button::after {
        right: 100%;
        top: 80%;
        background: white;
        width: 80%;
    }
    
    .b-product .c-button:active::after {
        right: 0;
    }
}