/***** Rate *****/

.rate {
    opacity: 0;
    transform: translateY(100px);
    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
    width: min(1200px, 92%);
    margin: 0 auto 2.5rem;
    text-align: center;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .rate-cat {
        width: min(100%, 20rem);
        display: inline-block;
        vertical-align: top;
        background: rgba(49, 51, 56, 0.78);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 1.4rem;
        margin: 0.6rem;
        transition:
            transform 0.25s ease,
            border-color 0.25s ease,
            background 0.25s ease;
        min-height: 590px;
        border-radius: 24px;

        &:hover {
            transform: translateY(-4px);
            border-color: rgba(88, 101, 242, 0.45);
        }

        &.unavailable {
            opacity: 0.55;
            pointer-events: none;
        }

        &.FORFAIT {
            background: linear-gradient(
                135deg,
                rgba(88, 101, 242, 0.24),
                rgba(121, 131, 245, 0.24)
            );
        }
    }

    i {
        color: var(--accent);
    }

    h5 {
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        font-family: "HelveticaNeue", sans-serif;
        color: var(--text);
    }

    small {
        font-family: "HelveticaNeue", sans-serif;
        text-transform: uppercase;
        color: var(--muted);
    }

    ul {
        margin: 0.8rem 0 0;
        padding: 0;
    }

    li {
        list-style: none;
        text-align: left;
        padding: 0.45rem 0;
        color: var(--muted);
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);

        &:last-child {
            border-bottom: 0;
        }
    }

    .price {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--text);
    }

    .no-price {
        text-decoration: line-through;
        color: rgba(148, 163, 184, 0.6);
        position: relative;
        top: -12px;
        display: block;
    }

    .info {
        color: var(--muted);
        display: block;
        margin-top: 0.2rem;
    }
}

/***** Responsive Mobile *****/

@media screen and (max-width: 768px) {
    .rate {
        width: 92%;

        .rate-cat {
            width: 100%;
            margin: 0.5rem 0;
        }
    }
}

/***** Responsive Tablette *****/

@media screen and (max-width: 990px) and (min-width: 769px) {
    .rate {
        width: 92%;

        .rate-cat {
            width: min(100%, 22rem);
            margin: 0.5rem;
        }
    }
}