.carousel {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 350px;
    gap: 10px;
    margin-bottom: 3rem;

    > div {
        flex: 0 0 150px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px #2c2c2c;
        position: relative;
        overflow: hidden;

        &:nth-of-type(1) {
            background: url("../art/pd1.jpg")
            no-repeat 50% / cover;
        }
        &:nth-of-type(2) {
            background: url("../art/pd2.jpg")
            no-repeat 50% / cover;
        }
        &:nth-of-type(3) {
            background: url("../art/pd3.jpg")
            no-repeat 50% / cover;
        }
        &:nth-of-type(4) {
            background: url("../art/pd4.jpg")
            no-repeat 50% / cover;
        }

        .c-content {
            font-size: 1.4rem;
            color: #fff;
            display: flex;
            align-items: center;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            background: rgb(2, 2, 46);
            background: linear-gradient(
                    0deg,
                    rgba(2, 2, 46, 0.6755077030812324) 0%,
                    rgba(255, 255, 255, 0) 100%
            );
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
            padding: 0 0 15px 0;

            span {
                display: block;
                margin: 10px;
                font-size: 1.2rem;
            }

            .rewards {
                display: inline-flex;
                margin-bottom: 10px;

                img {
                    object-fit: none;
                }
            }
        }

        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px #2a2a2a;
            transform: translatey(-30px);

        }
        /*Tablet view*/
        @media only screen and (max-width: 992px){
            &:nth-of-type(1) .c-content {
                opacity: 1;
                transform: translatey(0%);
                visibility: visible;
            }
            &:nth-of-type(1) {
                flex: 0 0 250px;
                box-shadow: 1px 3px 15px #2a2a2a;
                transform: translatey(-30px);

            }
        }

        &:hover .c-content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

@media only screen and (max-width: 600px) {
    .carousel {
        justify-content: left;
        margin: 2rem;
    }
}