/* List View */
.list .object {
    width: 100% !important;
    display: flex;
    background: #ffffff;
    padding: 16px;
    border: 1px solid var(--linegrey);
    gap: 16px;
    margin-bottom: 0;
    border-bottom: 0px;
}

    .list .object:last-child {
        margin-bottom: 24px;
        border-bottom: 1px solid var(--linegrey) !important;
    }

    .list .object #object-image-container {
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .list .object:hover #object-image-container {
        --tw-drop-shadow: none !important;
    }

    .list .object img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .list .object #object-buttons {
        top: calc(((100vw - 100px) * 0.5625) - 42px) !important;
    }

    .list .object #progress-bar {
        opacity: 1;
        top: calc(((100vw - 100px) * 0.5625) - 7px) !important;
    }

    .list .object #image-gradient {
        top: 0;
        height: calc((100vw - 100px) * 0.5625);
    }

    .list .object #default-description {
        display: none;
    }

    .list .object #object-image-container #hover-description {
        display: contents !important;
        opacity: 1 !important;
        transition: none !important;
        position: relative;
    }

    .list .object #object-image-container #hover-description #description-text-container {
        margin: 0 !important;
    }

    .list .object #object-image-container #object-title {
        font-size: 1rem;
        line-height: 1.5rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .list .object #object-image-container #object-description {
        font-size: 1rem;
        line-height: 1.5rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .list .object #object-image-container #object-info {
        font-size: 1rem;
        line-height: 1.5rem;
    }

@media (min-width: 640px) {
    .list .object #object-image-container {
        flex-direction: row !important;
    }

    .list .object #object-buttons {
        top: calc((14rem * 0.5625) - 42px) !important;
    }

    .list .object img {
        width: 14rem;
        max-width: 14rem;
        height: fit-content;
    }

    .list .object #image-gradient {
        width: 14rem;
        height: 56.25%;
    }

    .list .object #progress-bar {
        width: 14rem;
        top: calc((14rem * 0.5625) - 6px) !important;
    }
}

@media (min-width: 768px) {
    .list .object img {
        width: 18rem;
        max-width: 18rem;
        height: fit-content;
    }

    .list .object #image-gradient {
        width: 18rem !important;
        height: calc(18rem * 0.5625) !important;
    }

    .list .object #object-buttons {
        top: calc((18rem * 0.5625) - 42px) !important;
    }

    .list .object #progress-bar {
        width: 18rem;
        top: calc((18rem * 0.5625) - 6px) !important;
    }

    .list .object #object-image-container #object-title {
        font-size: 1.125rem;
        line-height: 1.75rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

@media (min-width: 1280px) {
    .list .object #object-image-container #object-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .list .object #object-image-container #object-description {
        font-size: 1rem;
        line-height: 1.5rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}


/* Card View */
:root {
    --arrow-width: 32px;
}

@media (min-width: 640px) {
    :root {
        --arrow-width: 50px;
    }
}

.carousel-container {
    position: relative;
}

.slider-content {
    min-width: 100%;
    white-space: nowrap;
    position: relative;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.gallery-content {
    margin: 0 -0.75rem;
}

.object {
    height: auto;
    display: inline-table;
    position: relative;
    margin: 0 .75rem;
    transition: all 0.8s ease-in-out;
    white-space: normal !important;
}

.carousel-container .object:nth-of-type(1) {
    margin-left: var(--arrow-width);
}

#object> #object-image-container {
    transition: all 0.5s ease-in-out;
}

#object:hover #object-image-container {
    transform: scale(1.2) translate(0px, 0px);
    transition: all 0.5s ease-in-out;
}

.object img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

#default-description {
    opacity: 1;
    width: var(--object-width);
    transition: opacity 0.5s ease-in-out;
}

#object:hover #object-image-container ~ #description > #default-description {
    display: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#hover-description {
    display: none;
    position: absolute;
    opacity: 0;
    background-color: #ffffff;
    width: var(--object-width);
    transition: all 0.5s ease-in-out;
}

#object:hover #object-image-container > #hover-description {
    display: block;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

#object-favorite .swap-off,
#object-favorite:hover .swap-off,
#object-favorite .swap-on,
#object-favorite:hover .swap-on {
    transition: all 0.4s ease-in-out;
}

#object-favorite:hover .swap-off {
    border-color: #ffffff;
}

#object #object-favorite:hover .swap-on {
    background-color: rgb(16 80 130 / 0.5);
}

#object> #object-image-container:nth-of-type(1):hover {
    z-index: 1000;
}

#object> #object-image-container:nth-of-type(2):hover {
    z-index: 2000;
}

#object> #object-image-container:nth-of-type(3):hover {
    z-index: 3000;
}

#object> #object-image-container:nth-of-type(4):hover {
    z-index: 4000;
}

#object> #object-image-container:nth-of-type(5):hover {
    z-index: 5000;
}

#object> #object-image-container:nth-of-type(6):hover {
    z-index: 6000;
}

#object> #object-image-container:nth-of-type(7):hover {
    z-index: 7000;
}

#object> #object-image-container:nth-of-type(8):hover {
    z-index: 8000;
}

#object> #object-image-container:nth-of-type(9):hover {
    z-index: 9000;
}

#object> #object-image-container:nth-of-type(10):hover {
    z-index: 10000;
}

.object:nth-of-type(11):hover {
    z-index: 11000;
}

#object> #object-image-container:nth-of-type(12):hover {
    z-index: 12000;
}

#object> #object-image-container:nth-of-type(13):hover {
    z-index: 13000;
}

#object> #object-image-container:nth-of-type(14):hover {
    z-index: 14000;
}

#object> #object-image-container:nth-of-type(15):hover {
    z-index: 15000;
}

#object> #object-image-container:nth-of-type(16):hover {
    z-index: 16000;
}

#object> #object-image-container:nth-of-type(17):hover {
    z-index: 17000;
}

#object> #object-image-container:nth-of-type(18):hover {
    z-index: 18000;
}

#object> #object-image-container:nth-of-type(19):hover {
    z-index: 19000;
}

#object> #object-image-container:nth-of-type(20):hover {
    z-index: 200000;
}

#object> #object-image-container:nth-of-type(21):hover {
    z-index: 11200;
}

#object> #object-image-container:nth-of-type(22):hover {
    z-index: 22000;
}

#object> #object-image-container:nth-of-type(23):hover {
    z-index: 23000;
}

#object> #object-image-container:nth-of-type(24):hover {
    z-index: 24000;
}

#object> #object-image-container:nth-of-type(25):hover {
    z-index: 25000;
}

#object> #object-image-container:nth-of-type(26):hover {
    z-index: 26000;
}

#object> #object-image-container:nth-of-type(27):hover {
    z-index: 27000;
}

#object> #object-image-container:nth-of-type(28):hover {
    z-index: 28000;
}

#object> #object-image-container:nth-of-type(29):hover {
    z-index: 29000;
}

#object> #object-image-container:nth-of-type(30):hover {
    z-index: 300000;
}

/* Skeleton Card */

#skeleton-object.object:hover {
    transform: none !important;
}

/* Current card on lesson series */

.object.current-lesson {
    background-color: var(--lightgrey);
    border-radius: 0.5rem;
}

.object.current-lesson #default-description {
}