/* =========================================================
   ORGAINA BODY SIGNALS
========================================================= */

.orgaina-signals-carousel {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
}


/* =========================================================
   SWIPER
========================================================= */

.orgaina-signals-carousel .swiper {
    width: 100%;

    padding: 10px 2px 20px;

    overflow: visible;
}

.orgaina-signals-carousel .swiper-wrapper {
    align-items: stretch;
}


/* =========================================================
   SLIDE
   DESKTOP: 4 FULL CARDS
========================================================= */

.orgaina-signals-carousel .swiper-slide {
    width: calc((100% - 54px) / 4);

    height: auto;

    display: flex;
}


/* =========================================================
   CARD
========================================================= */

.orgaina-signal-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 26px;

    background: #F8F5ED;
}


/* =========================================================
   VIDEO
========================================================= */

.orgaina-signal-media {
    position: relative;

    width: 100%;

    aspect-ratio: 0.72;

    overflow: hidden;

    background: #eeeeee;
}

.orgaina-signal-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    cursor: pointer;

    pointer-events: auto;
}


/* =========================================================
   BOTTOM CONTENT
========================================================= */

.orgaina-signal-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 1;

    padding: 16px 20px 24px;

    text-align: center;

    background: #F8F5ED;
}


/* =========================================================
   ICON
========================================================= */

.orgaina-signal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 7px;
}

.orgaina-signal-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   TITLE
========================================================= */

.orgaina-signal-content h3 {
    margin: 0 0 8px;

    color: #000000;

    font-size: 23px;
    line-height: 1.15;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.orgaina-signal-content p {
    max-width: 240px;

    margin: 0;

    color: #171717;

    font-size: 14px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   MEDIUM DESKTOP
   3 CARDS
========================================================= */

@media (max-width: 1200px) {

    .orgaina-signals-carousel .swiper-slide {
        width: calc((100% - 36px) / 3);
    }

}


/* =========================================================
   TABLET
   2 CARDS
========================================================= */

@media (max-width: 900px) {

    .orgaina-signals-carousel .swiper-slide {
        width: calc((100% - 18px) / 2);
    }

}


/* =========================================================
   MOBILE
   CARD + PEEK OF NEXT
========================================================= */

@media (max-width: 767px) {

    .orgaina-signals-carousel .swiper {
        padding:
            6px
            28px
            18px
            0;
    }

    .orgaina-signals-carousel .swiper-slide {
        width: 82%;
    }

    .orgaina-signal-card {
        border-radius: 24px;
    }

    .orgaina-signal-content {
        padding: 15px 18px 22px;
    }

    .orgaina-signal-icon {
        font-size: 29px;
    }

    .orgaina-signal-content h3 {
        font-size: 21px;
    }

    .orgaina-signal-content p {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .orgaina-signals-carousel .swiper-slide {
        width: 86%;
    }

    .orgaina-signal-content h3 {
        font-size: 20px;
    }

    .orgaina-signal-content p {
        font-size: 13px;
    }

}