.videos {
    display: block;
    overflow-x: hidden;
    width: 100%;
    padding: 1.2% 0 4%;
    position: relative;
}

.videos .slider {
    position: relative;
    padding: 0 5%;
    margin: 0 -.5%;
}

.videos .slider .cards {
    width: 100%;
    display: block;
    white-space: nowrap;
    font-size: 0;
    transition: transform 400ms cubic-bezier(0.5, 0, 0.1, 1);
    margin-top: 1%;
}

.videos .slider .cards .card.loading::before {
    border-radius: inherit;
}
.videos .slider .cards .card.escolhido::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    margin: 0 auto;
    border-left: calc(calc(15/var(--ratio-width)) * 100vw) solid transparent;
    border-right: calc(calc(15/var(--ratio-width)) * 100vw) solid transparent;
    border-top: calc(calc(15/var(--ratio-width)) * 100vw) solid white;
}

.videos .slider .cards .card {
    cursor: pointer;
    width: 19%;
    margin-right: .5%;
    margin-left: .5%;
    border-radius: 0.83333vw;
    padding-top: 26.4%;
    transition: transform 400ms cubic-bezier(0.5, 0, 0.1, 1);
    position: relative;
    display: inline-block;
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 0, 0);
}

.videos .slider .cards .card .card-mask {
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.5, 0, 0.1, 1);
    position: absolute;
    height: calc(100% + 1px);
    z-index: 2;
    width: calc(100% + 1px);
    left: -1px;
    border-radius: 12px;
    margin-top: 1px;
    bottom: -1px;
    background-image: linear-gradient(to bottom, rgba(67, 67, 67, 0), var(--escuro-tema));
}
.videos .slider .cards .card .card-content .play-mask,
.videos .slider .cards .card .card-content .mascara-falsa {
    position: absolute;
    left: 0;
    right: 0;
}
.videos .slider .cards .card .card-content .play-mask {
    height: 83%;
    bottom: 50%;
}
.videos .slider .cards .card .card-content .mascara-falsa {
    bottom: 0;
    height: 50%;
}
.videos .slider .cards .card .card-content .texto,
.videos .slider .cards .card .card-content a {
    transition: color .3s ease;
}
.videos .slider .cards .card .card-content {
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.5, 0, 0.1, 1);
    flex-wrap: wrap;
    padding: 10.2% 8.1%;
    position: absolute;
    height: calc(75% + 1px);
    z-index: 4;
    width: calc(100% + 1px);
    left: -1px;
    border-radius: 12px;
    margin-top: 1px;
    bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: #fff;
}

.videos.cards-hoverable .slider .cards .card:hover .card-mask,
.videos.cards-hoverable .slider .cards .card:hover .card-content,
.videos .slider .cards .card.hover .card-mask,
.videos .slider .cards .card.hover .card-content {
    opacity: 1;
}

.videos.cards-hoverable .slider .cards .card .play-mask:hover ~ .to-orange-color.play,
.videos .slider .cards .card.hover .play-mask:hover ~ .to-orange-color.play,
.videos.cards-hoverable .slider .cards .card .mascara-falsa:hover ~ .to-orange-color:not(.play),
.videos .slider .cards .card.hover .mascara-falsa:hover ~ .to-orange-color:not(.play) {
    color: var(--laranja-tema);
}

.videos .slider .cards .card .card-content .texto,
.videos .slider .cards .card .card-content .arrow-down {
    display: block;
    width: 100%;
    white-space: normal;
}

.videos .slider .cards .card .card-content .texto p,
.videos .slider .cards .card .card-content .texto h3 {
    margin: 0;
}

.videos .slider .cards .card .card-content .texto p {
    font-size: 0.71vw;
    line-height: 1.38;
}

.videos .slider .cards .card .card-content .texto h3 {
    font-size: 1.3vw;
    font-weight: bold;
    margin-bottom: 5px;
}

.videos .slider .seta {
    width: 5%;
    position: absolute;
    padding-top: 24.1%;
    z-index: 2;
    content: "";
    bottom: 0;
    background-color: rgba(23, 23, 23, .5);
}

.videos .slider .seta img {
    position: absolute;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    width: 25%;
    top: 50%;
}

.videos .slider .seta.ativo:hover {
    cursor: pointer;
}

.videos .slider .seta.ativo:hover img {
    opacity: 1;
}

.videos .slider .seta.esquerda {
    left: 0;
}

.videos .slider .seta.direita {
    right: 0;
}

.videos .slider .seta.esquerda img {
    transform: translateY(-50%);
    left: 30%;
}

.videos .slider .seta.direita img {
    transform: rotate(180deg) translateY(50%);
    right: 30%;
}

@media only screen and (max-width: 767px) {
    .videos .slider .cards .card {
        border-radius: 6px;
        width: 32%;
        padding-top: 46.4%;
    }
}