.carousel {
    width: 60%;
    height: 100%;

    border-radius: 0.4rem;
    overflow: hidden;
    position: relative;

    /* 居中 */
    margin-left: auto;
    margin-right: auto;

    border: 0.075rem solid #7b7b7b7a;
    box-shadow: var(--md-shadow-z1);
}

.carousel-container {
    width: 100%;
    height: 100%;

    position: relative;
    left: 0;

    display: flex;

    /* 过渡动画 1s */
    transition: all 1s;
}

.carousel-hover {
    height: 100%;
    width: 10%;
    position: absolute;
    top: 0;

    /* 子元素垂直居中 */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.carousel-hover.left {
    left: 0;
}
.carousel-hover.right {
    right: 0;
}

.carousel-hover button {
    background-color: var(--md-accent-fg-color);
    border-radius: 50%;

    cursor: pointer;

    opacity: 0;
    transition: opacity 0.3s;
}
.carousel-hover button::after {
    display: block;
    height: 1.5rem;
    width: 1.5rem;

    background-color: white;
    content: "";
    mask-position: center;
    -webkit-mask-position: center;
}
.carousel-hover.left button::after {
    mask-image: var(--md-tabbed-icon--prev);
    -webkit-mask-image: var(--md-tabbed-icon--prev);
}
.carousel-hover.right button::after {
    mask-image: var(--md-tabbed-icon--next);
    -webkit-mask-image: var(--md-tabbed-icon--next);
}

/* hover 外层 */
.carousel-hover:hover button {
    opacity: 0.5;
    transition: opacity 0.3s;
}
/* hover 内层 */
.carousel-hover button:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.carousel-container a {
    width: 100%;
    height: 100%;

    flex-shrink: 0;
}

.carousel-container img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

.carousel-bottom {
    position: absolute;
    /* 宽度等同于内容宽度 */
    width: 100%;
    padding: 20px;

    bottom: 0;

    display: flex;
    justify-content: center;
    /* 指示器间距 */
    gap: 10px;

    opacity: 0;
    transition: opacity 0.3s;
}
.carousel-bottom:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.carousel-bottom .indicator {
    height: 5px;
    width: 20px;

    background-color: var(--md-accent-fg-color);

    opacity: 0.5;
    cursor: pointer;
}

.carousel:hover .bottom .indicator {
    opacity: 1;
}
.carousel:hover .shift .btn {
    opacity: 1;
}

@media screen and (max-width: 600px) {
    .carousel {
        width: 100%;
    }

    .carousel-hover button {
        opacity: 1;
    }
}