.carousel {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    /* get rid of the inline sizes of the elements taking space */
    font-size: 0px;
}

.carousel img {
    /* display: block; */
    width: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.carousel p {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--white-font);
    /* display: block; */
}

.carousel p.FirstText {
    left: 50%;
    top: 23%;
    font-size: 8vw;
}

.carousel p.SecondText {
    left: 50%;
    top: 43%;
    font-size: 8.2vw;
}

.carousel p.LeftText {
    padding: 0;
    margin: 0;
    left: -13%;
    top: 40%;
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(-90deg);
    font-size: 3vw;
    line-height: 9vw;
}

p.CenteredText {
    padding: 0;
    margin: 0;
    left: -13%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-size: 3vw;
    line-height: 9vw;
}
.carousel p.FDtext {
    transform: translate(0%, 0%);
    top: 5%;
    right: 0;
    text-align: right;
    font-size: 3.75vw;
    line-height: 5.5vw;
    padding-right: 2vw;
}

.carousel .overlap {
    position: absolute;
    bottom: 0%;
    transform: translate(-100%, -1%);
    /* opacity: 90%; */
}

.carouselGradient {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--blue-bg));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}