:root {
    --box: #EEE;
    --no: #777;
}

.prices {
    overflow-x: scroll;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* INFO: hide scrollbar */
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none;
    /* <-- */

    max-width: 1400px;
    margin: 0 auto;
}

.prices .button { margin-top: 10px; }

.prices::-webkit-scrollbar { display: none; } /* INFO: hide scrollbar for Chrome */

.prices table {
    border-collapse: collapse;
    height: 1px; /* INFO: for div heigh 100% inside table td https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td/ */
}

.prices table td {
    padding: 0;
    vertical-align: top;
    height: 100%;
}

.prices table td > div { box-sizing: border-box; }

.prices table td:first-child { scroll-snap-align: start; }

.prices table td:nth-child(2) { scroll-snap-align: center; }

.prices table td:last-child { scroll-snap-align: end; }

.prices table tr:not(.options) { text-align: center; }

.prices table tr.options { border-top: 1px solid var(--border); }

.prices table td:nth-child(2) { background-color: var(--white); }

.prices table tr:first-child td:nth-child(2) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.prices table tr:last-child td:nth-child(2) {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 10px;
}

.prices tr:first-child td > div {
    background-color: var(--box);
    position: relative;
    border-radius: 7px;
}

p.priceinfo {
    text-align: center;
    font-size: 15px;
}

/* Mobile */
@media (max-width: 459.9px) {
    .prices table td > div {
        width: calc(100vw - 80px);
        min-width: 280px;
        height: calc(100% - 20px); /* INFO: https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td/ */
    }

    .prices tr:first-child td > div {
        margin: 10px;
        padding: 30px 10px;
    }
}

/* Mobile & Tablet & Desktop */
@media (min-width: 460px) {
    .prices table { min-width: 100%; }

    .prices table td {
        width: 33.333%;
        min-width: 350px;
    }

    .prices table td > div { height: calc(100% - 40px); } /* INFO: https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td/ */

    .prices tr:first-child td > div {
        margin: 20px;
        padding: 30px 20px;
    }
}

/* Mobile & Tablet */
@media (max-width: 900px) {
    .prices:not(.show) table tr:first-child td:nth-child(2) {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .prices:not(.show) tr.options { display: none; }

    .prices > a {
        display: block;
        text-align: center;
        position: absolute;
        left: 10px;
        right: 10px;
        margin: 10px;
    }

    .prices.show > a span:first-child { display: none; }

    .prices:not(.show) > a span:last-child { display: none; }

    p.priceinfo { margin: 60px 20px 0 20px; }
}

/* Desktop */
@media (min-width: 900.1px) {
    .prices > a { display: none; }

    p.priceinfo {
        max-width: 800px;
        margin: 60px auto 0 auto;
    }
}

/* ((())) */
.prices .pricelabel {
    background-image: url(../svg/label.svg);
    background-repeat: no-repeat;
    background-position: top left;
    position: absolute;
    top: -2px;
    right: 15px;
    width: 21px;
    height: 43px;
}

.prices .tag {
    position: absolute;
    top: -2px;
    left: -2px;
}

.prices .tag > div {
    width: 103px;
    height: 103px;
    background: var(--red);

    clip-path: polygon(50% 0, 100% 0, 0 100%, 0 50%);
}

.prices .tag > span {
    color: var(--color-text);
    position: absolute;
    top: 21px;
    left: -10px;
    font-size: 14px;
    font-weight: bolder;
    text-align: center;
    width: 97px;

    transform: rotate(-45deg);
}

.prices h3 { font-weight: 500; }

.prices .info {
    margin: 0 20px;
    font-weight: 500;
}

.prices .yes,
.prices .no {
    margin: 15px 30px;
    line-height: 26px;
}

.prices .no { color: var(--no); }