.appHeader {
    border-bottom: 1px solid #DDD;
}

.appIndex {
    min-height: var(--safe-area);
    display: flex;
    flex-direction: column;
}

.appIndexHero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.appIndexHeroContent {
    padding: 32px 20px 0 20px;
    color: #48321E;
    text-align: center;
}

.appIndexHeroTitle {
    text-transform: uppercase;
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    margin: 0 0 10px 0;
}

.appIndexHeroText {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
}

.appIndexHeroImage {
}

.appIndexSwiperSlidesTemplate {
    display: none;
}

.appIndexSwiper {
    padding: 0 20px;
    height: 200px;
    width: 100%;
}

.appIndexSwiperSlide {
    border-radius: 16px;
    background-color: #FFF;
    padding: 16px 12px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.appIndexSwiperSlide.hidden {
    display: none;
}

.appIndexSwiperSlideTitle {
    margin: 0 0 20px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
}

.appIndexSwiperSlideText {
    text-align: center;
    font-size: 15px;
    color: #666;
    margin: 0 auto;
    line-height: 20px;
}

.appIndexSwiperSlideAction {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: block;
    padding-top: 32px;
    margin: auto 0 0 0;
    color: var(--color-green);
}