/* Banner e versículo */
.inicio {
    background: url(../IMG/banner.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
    margin: 2rem;
    margin-top: 10rem;
    margin-bottom: 1rem;
    padding: 5rem 1rem;
    border-radius: 10px;
    max-width: calc(100% - 6rem);
    margin-left: auto;
    margin-right: auto;
}
.inicio .content {
    text-align: right;
    padding-right: 1rem;
}
.inicio .content h1 {
    font-size: 2rem;
    color: #282828;
}
.inicio .content p {
    font-size: 1.4rem;
    color: #282828;
}
.inicio hr {
    border: none;
    height: .3rem;
    width: 12rem;
    background-color: #820101;
    margin: 1rem 0 .5rem auto;
}

.carousel-card {
    box-shadow: none;
    padding: 0;
    display: none;
}
.carousel-title {
    display: none;
}
.slides .inner {
    width: calc(100% * 4);
}

/* Slide individual */
.slides .slide {
    width: calc(100% / 4);
    min-height: 600px;
}

.slide img, video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 361px) {
    .inicio {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 3rem 5%;        
    }
    .inicio .content h1 {
        font-size: clamp(2rem, 4vw, 3rem);
    }
    .inicio .content p {
        font-size: clamp(1.6rem, 3vw, 2rem);
    }
    .inicio hr {
        width: clamp(14rem, 35vw, 15rem);
    }
}
@media (min-width: 420px) {
    .inicio .content {
        padding-right: 2rem;
    }
    .inicio .content h1 {
        font-size: clamp(2.4rem, 4vw, 3rem);
    }
    .inicio .content p {
        font-size: clamp(1.8rem, 3vw, 2rem);
    }
    .inicio hr {
        width: clamp(16rem, 37vw, 18rem);
    }
}
@media (min-width: 500px) {
    .inicio .content {
        padding-right: 2rem;
    }
    .inicio .content h1 {
        font-size: clamp(3rem, 4vw, 3rem);
    }
    .inicio .content p {
        font-size: clamp(2rem, 3vw, 2rem);
    }
    .inicio hr {
        width: clamp(18rem, 37vw, 28rem);
    }
}
@media (min-width: 600px) {
    .inicio .content {
        padding-right: 2rem;
    }
    .inicio .content h1 {
        font-size: clamp(3.7rem, 4vw, 3rem);
    }
    .inicio .content p {
        font-size: clamp(2.5rem, 3vw, 2rem);
    }
    .inicio hr {
        width: clamp(25rem, 37vw, 26rem);
    }
}
@media (min-width: 700px) {
    .inicio {
        max-width: calc(100% - 10%);
    }
    .inicio .content {
        padding-right: 2rem;
    }
    .inicio .content h1 {
        font-size: clamp(4.2rem, 4vw, 3rem);
        line-height: 1.3;
    }
    .inicio .content p {
        font-size: clamp(2.9rem, 3vw, 2rem);
        line-height: 1.4;
    }
    .inicio hr {
        width: clamp(30rem, 37vw, 35rem);
        height: 0.3rem;
    }
}

@media (min-width: 900px) {

    .inicio {
        margin: 10.7rem auto 0;
        max-width: calc(100% - 12%);
        min-height: clamp(55vh, 65vh, 7vh);
        padding: 4rem;
        border-radius: 10px;
        background-size: cover;
        background-position: center top;
        margin-bottom: 2rem;
    }

    .inicio .content {
        text-align: right;
        padding-right: clamp(2rem, 3vw, 7%);
    }

    .inicio .content h1 {
        font-size: clamp(3.2rem, 4vw, 4.5rem);
        line-height: 1.2;
    }

    .inicio .content p {
        font-size: clamp(2rem, 2.6vw, 2.8rem);
        line-height: 1.3;
    }

    .inicio hr {
        width: clamp(20rem, 35vw, 35rem);
        height: .5rem;
        margin: 0 0 1rem auto;
    }

    .missoes .content {
        display: flex;
        align-items: stretch;
        gap: 2rem;
    }

    .carousel-card {
        display: flex;
        flex: 1;
        height: auto;
        flex-direction: column;
    }

    .carousel-arrow {
        display: none;
    }

    .missoes .content > p {
        flex: 1;
        margin: 0;
    }

    .missoes .slider,
    .missoes .overflow,
    .missoes .slides,
    .missoes .slides .inner {
        height: 100%;
    }

    .missoes .slides .inner {
        min-height: unset;
        max-height: unset;
    }
}

@media (min-width: 1100px) {
    .inicio {
        min-height: 65dvh;
    }
    .inicio .content {
        padding-right: clamp(2rem, 6dvw, 7%);
    }
}