.card {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 98;
    .bg-card {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(33, 33, 33, 0.46);
        z-index: 97;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s linear;
    }
    .area-bottom div:first-child,
    .area-top {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap:  wrap;
        gap: 10px;
        transition: all 0.2s linear;
    }
    .area-top {
        display: none;
        padding-bottom: 50px;
        background-color: #ffeb3b;
        padding: 25px 15px 15px 15px;
        position: relative;
        z-index: 98;
    }
    &.active-card {
        .area-bottom div:first-child button {
            opacity: 0;
        }
        .area-top {
            display: flex;
        }
        button.open-card {
            span {
                transform: rotate(-225deg);
            }
        }
        .bg-card {
            opacity: 1;
            visibility: visible;
        }
    }
    .product {
        width: calc(50% - 5px);
        border: none;
        background-color: #fff;
        font-size: 2vw;
    }
    button.open-card {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50rem;
        background-color: #ffeb3b;
        border: none;
        transition: all 0.1s linear;
        cursor: pointer;
        z-index: 99;
        &:hover {
            background-color: #e7d637;
        }
        &:active {
            background-color: #cabb33;
        }
        span {
            display: inline-block;
            width: 10px;
            height: 10px;
            transform: rotate(-45deg);
            transition: all 0.2s linear;
            border-right: 1px solid #333;
            border-top: 1px solid #333;
            animation: iconAnimate linear 1.2s infinite;
        }
    }
    .area-bottom {
        background-color: #ffeb3b;
        padding: 25px 15px 15px 15px;
        position: relative;
        z-index: 98;
        width: 100%;
        display: grid;
        grid-template-columns: auto min-content;
        grid-template-rows: auto;
        grid-gap: 15px;
        a {
            background-color: #81c784;
            border-radius: 50rem;
            padding: 8px 15px;
            display: inline-block;
            &:hover {
                background-color: #4caf50;
            }
            &:active {
                background-color: #669e69;
            }
        }
        p {
            font-size: 1.1rem;
            width: max-content;
            font-weight: bold;
            margin-top: auto;
            span {
                font-size: 1.6rem;
            }
        }
    }
}