:root {
    --amarelo-cy: rgb(242, 226, 5);
    --amarelo-queimado: #8C8303;
    --roxo-cy: #460273;
    --branco-cy: #F2F2E9;
    --preto-cy: #0d0d0d;
    --fonte: "Chakra Petch", serif;
}

.carossel {
    width: 100%;
    height: 600px;
    text-align: center;
    display: flex;
    align-items: start;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.membros h1 {
    color: var(--amarelo-cy);
    text-align: center;
    font-size: clamp(20px, 6vw, 42px);
    padding-top: 30px;
    margin-bottom: 30px;
}

.sim {
    color: var(rgb(140, 131, 3));
}

.dentro {
    text-align: center;
    --w: clamp(180px, 20vw, 250px);
    --h: clamp(250px, 28vw, 350px);
    --translateZ: calc((var(--w) / 2) / tan(22.5deg));
    --rotateX: -15deg;
    --perspective: 1000px;
    position: relative;
    width: var(--w);
    height: var(--h);
    z-index: 2;
    transform-style: preserve-3d;
    transform: perspective(var(--perspective));
    animation: rotating 35s linear infinite;
    background-color: transparent;
}

@keyframes rotating {
    from {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0);
    }

    to {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn);
    }
}

.cartao {
    position: absolute;
    border: 2px solid rgba(var(--cor-borda));
    border-radius: 12px;
    overflow: hidden;
    inset: 0;
    transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
    backface-visibility: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 20px;
}

.cartao h2 {
    color: var(--amarelo-cy);
    font-size: clamp(0.5rem, 1vw, 1.2rem);
    padding: 0 10px;
    margin: 5px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.cartao p {
    color: var(--amarelo-cy);
    font-size: clamp(0.6rem, 1.5vw, 0.9rem);
    margin: 0 0 10px;
}

.imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #0000 radial-gradient(circle,
            rgba(var(--cor-cartao), 0.2) 0%,
            rgba(var(--cor-cartao), 0.6) 80%,
            rgba(var(--cor-cartao), 0.9) 100%);
}

.foto {
    margin: 10px;
}

.foto img {
    border-radius: 10px !important;
    aspect-ratio: 1/1;
}

@media screen and (max-width: 1030px) {
    .carossel {
        height: 500px;
    }
}

@media screen and (max-width: 768px) {
    .dentro {
        --rotateX: -10deg;
    }

    .carossel {
        height: 400px;
    }
}

@media screen and (max-width: 480px) {
    .dentro {
        --w: 150px;
        --h: 220px;
        --rotateX: -5deg;
    }

    .cartao h2 {
        font-size: 0.8rem;
    }

    .cartao p {
        font-size: 0.6rem;
    }

    .carossel {
        height: 350px;
    }
}