.section-yellow,
.section-red
{
    overflow: hidden;
}
.section-yellow::after,
.section-red::after
{
    content: "";
    display: block;
    position: relative;
    height: 6vw;
    margin-top: -3vw;
    width: 101%;
    bottom: -2px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}
.section-yellow::after
{
    background-image: url("../img/home_tored.svg");
}
.section-red::after
{
    background-image: url("../img/home_towhite.svg");
    margin-top: 40px;
}
.section-yellow img
{
    -webkit-mask-image: url("../img/home_header.svg");
    mask-image: url("../img/home_header.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
}
.swiper-button-next
{
    top: 0;
    width: 100px;
    height: 100%;
}
.swiper-button-prev::after,
.swiper-button-next::after
{
    content: url("../img/next.svg");
}
.swiper-button-prev::after
{
    position: absolute;
    left: 0;
    transform: rotateZ(180deg);
}
.swiper-container
{
    /* overflow: hidden;  check if webflow */
    /* max-width: none; check if webflow */
}
.showcase--img-container
{
    /* transform: translateX(-20%); check if webflow */ 
}
.showcase--serving-suggestion
{
    /* transition: opacity 1s ease 0s; check if webflow */ 
}
.swiper-slide:not(.swiper-slide-active) .showcase--serving-suggestion
{
    opacity: 0;
}
.swiper-slide:not(.swiper-slide-active) .showcase--product-image
{
    transition: opacity 1s ease 0s
}
.swiper-slide:not(.swiper-slide-active) .showcase--product-image
{
    opacity: 0.72;
}
h1.heading-4
{
    font-size: clamp(35px, 6vw, 80px);
    line-height: clamp(45px, calc(6vw + 10px), 90px);
}
h2.heading-5,
h2.heading-6
{
    font-size: clamp(30px, 4vw, 50px);
    line-height: clamp(50px, calc(4vw + 10px), 60px);
}
h3.heading-10
{
    font-size: clamp(23px, 4vw, 35px);
    line-height: clamp(33px, 4vw, 50px);
}
.showcase--text-block .link,
.showcase--text-block .link-2
{
    font-size: clamp(16px, 3vw, 18px);
    line-height: clamp(26px, 3vw, 40px);
}
.section-yellow .section-content
{
    height: calc(50vw + 140px);
}
@media (min-width: 768px)
{
    .section-yellow .section-content
    {
        height: calc(50vw + 70px);
    }
    
    .section-white .swiper-wrapper
    {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .section-white .swiper-slide
    {
        width: 20% !important;
    }
    .section-white .commitment.homepage-modifier
    {
        width: auto;
    }
    .swiper-pagination
    {
        display: none;
    }
}
.swiper-pagination
{
    position: relative !important;
}
.swiper-pagination-bullet
{
    width: 16px;
    height: 16px;
    border: 1px solid var(--ptj-red);
    opacity: 1;
    background: rgba(255, 255, 255, 0);
    --swiper-theme-color: var(--ptj-red);
}
.swiper-pagination-bullet-active
{
    background: var(--swiper-pagination-color,var(--swiper-theme-color)) !important;
}
@media (max-width: 1245px)
{
    .section-yellow .section-content
    {
        margin: auto 6vw;
    }
}
h3.heading-10 strong::after,
h3.heading-10 strong::before
{
    content: url("../img/emphasize_right.svg");
    padding-left: 0.3ch;
}
h3.heading-10 strong::before
{
    display: inline-block;
    transform: rotateZ(180deg);
}
.showcase--img-container
{
    transform: translateX(0);
    transition: transform 1s ease 0s;
}
.swiper-slide:not(.swiper-slide-active) .showcase--img-container
{
    /* transform: translate(-20%, 0px); */
}
.showcase--product-image
{
    width: 288px;
    height: 288px;
}
@media screen and (max-width: 767px)
{
    .showcase--img-container 
    {
       min-height: 360px;
    }
}

.showcase--text-block
{
    transition: opacity 1s ease 0s;
}
.swiper-slide:not(.swiper-slide-active) .showcase--text-block
{
    opacity: 0;
}
.showcase--serving-suggestion 
{
    object-position: 50% 100%;
}
@media screen and (max-width: 767px)
{
    .showcase--serving-suggestion 
    {
        object-position: center;
        height: 50vw;
        width: auto;
        max-width: 100%;    
    }
}
h1.heading-4 strong
{
    position: relative;
}
h1.heading-4 strong::after
{
    content: "";
    position: absolute;    
    padding-left: 0.3ch;
    font-size: inherit;
    display: inline-block;
    height: 0.5em;
    background: url("../img/emphasize_red.svg");
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    width: 1vw;
    right: -0.5ch;
}

.showcase--img-container::after 
{
    content: "";
    z-index: 72;
    width: 50px;
    height: 50px;
    background: url("../img/vapor_animated.svg");
    display: block;
    background-repeat: no-repeat;
    top: 10%;
    left: 60%;
    position: absolute;
}
.inline-svg-container
{
    width: 50px;
}