main > h1,h3 {
    text-align: center;
}

/* ------------------------  CAROUSEL -------------------------------------- */

/* carousel container relative without overflow */
#carrousel-container {
    position: relative;
    overflow: hidden;
}

/* carousel itself */
.carousel {
    position: relative;
    display: flex;
    height: 75vh;
    flex-wrap: nowrap;
}

/* each slide*/
.slide {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
    height: 100%;
    transition: .5s ease-in-out;
}

/* make slide's image fit */
.slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* dots container */
.carousel-dots {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 2%;
    display: flex;
    justify-content: center;
    z-index: 5;
}

/* make dots look like dots */
.dot {
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}

/* active dot */
.dot.active {
    border: 7px solid var(--white-furrygourdin);
}

/* inactive dot */
.dot.inactive {
    border: 7px solid var(--gold-furrygourdin);
}

@media screen and (max-width: 768px){
    .carousel {
        height: 70vh;
    }
}