.recipe-slider { display: flex; }
.recipe-slider * { margin: 0; padding: 0; box-sizing: border-box; }
.recipe-slider .container {
    position: relative;
    margin: clamp(12px,3vw,24px) auto;
    width: min(1200px, 95vw);
    aspect-ratio: 2 / 1;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    border-radius: 12px;
    overflow: hidden;
}
.recipe-slider .slide .item {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}
.recipe-slider .slide .item:nth-child(1),
.recipe-slider .slide .item:nth-child(2) {
    top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%;
}
.recipe-slider .slide .item:nth-child(3) { left: 50%; }
.recipe-slider .slide .item:nth-child(4) { left: calc(50% + 220px); }
.recipe-slider .slide .item:nth-child(5) { left: calc(50% + 440px); }
.recipe-slider .slide .item:nth-child(n + 6) { left: calc(50% + 660px); opacity: 0; }

.recipe-slider .item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 450px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.recipe-slider .slide .item:nth-child(2) .content { display: block; }
.recipe-slider .content .name {
    font-size: clamp(28px,4vw,40px);
    text-transform: uppercase;
    font-weight: 800;
    opacity: 0;
    animation: recipe-slider-anim 1s ease-in-out 1 forwards;
}
.recipe-slider .content .des {
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: recipe-slider-anim 1s ease-in-out .3s 1 forwards;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.recipe-slider .content button,
.recipe-slider .content .btn-link {
    display:inline-block; padding:10px 20px; border:none; cursor:pointer;
    opacity:0; animation: recipe-slider-anim 1s ease-in-out .6s 1 forwards;
    border-radius:10px; background:rgba(255,255,255,.85); color:#222;
    font-weight:700; text-decoration:none;
}
@keyframes recipe-slider-anim {
    from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
    to { opacity: 1; transform: translate(0); filter: blur(0); }
}
.recipe-slider .button {
    width: 100%; text-align: center; position: absolute; bottom: 20px; left: 0;
    pointer-events: none; background: none !important;
}
.recipe-slider .button button {
    pointer-events: auto; width: 44px; height: 38px; border-radius: 8px;
    border: 1px solid #000; cursor: pointer; margin: 0 5px; transition: .3s;
    font-weight: 800; background: #fff;
}
.recipe-slider .button button:hover { background: #ababab; color: #fff; }

@media (max-width: 680px) {
    .recipe-slider .item .content { left: 18px; width: min(86%, 340px); }
    .recipe-slider .container { aspect-ratio: 9 / 16; }
    .recipe-slider .slide .item { top: 0; left: 0; width: 100%; height: 100%; transform: none; border-radius: 0; }
    .recipe-slider .slide .item:not(:nth-child(2)) { display: none; }
    .recipe-slider .item .content { left: 16px; width: calc(100% - 32px); }
    .recipe-slider .button { bottom: 12px; }
}