/* typography */

:root {

    /* font-sizes */
    --fs-900: clamp(5rem, 5vw + 1rem, 9.375rem);
    --fs-800: 3.5rem;
    --fs-700: 1.5rem;
    --fs-600: 1rem;
    --fs-500: 1rem;
    --fs-400: 0.9375rem;
    --fs-300: 1rem;
    --fs-200: 0.875rem;
}

.ff-serif { font-family: "Bellefair", serif; }
.ff-sans-cond { font-family: "Barlow Condensed", sans-serif; }
.ff-sans-normal { font-family: "Barlow", sans-serif; }

.letter-spacing-1 { letter-spacing: 4.75px; }
.letter-spacing-2 { letter-spacing: 2.7px; }
.letter-spacing-3 { letter-spacing: 2.35px; }


body{
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-500);
}


.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }

.fs-900,
.fs-800,
.fs-700,
.fs-600 {
    line-height: 1.1;
}

.carousel-item{
    background-color: black;
}

.carousel-control-prev-icon {
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}


@media (max-width: 900px) {


    .carousel-left-container {
        text-align: center;
        order: 2
    }

    .carousel-right-container {
        text-align: center;
        order: 1
    }


}


html, body {
    background-color: #ffeead;
}

h1, h2, h3, h4, h5, h6 {
    color: #800000;
}


.mango {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 100px;
    grid-auto-flow: dense;
}

.horizontal {
    grid-column: span 2;
}

.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

.mango > a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
}

.mango > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}