.slider {position: relative; width: 100%; overflow: hidden;}
.slider-wrapper {display: flex; width: 100%; transition: transform 0.4s ease; touch-action: pan-y; align-items: center; height: 320px;}
.card {flex: 0 0 100%; width: 100%; min-width: 100%; display: flex; justify-content: left; align-items: center; padding:24px; border-radius: 32px; position: relative; height: 320px;}
.card picture {position: absolute; inset: 0; width: 100%; height: 100%;}
.card picture img {border-radius: 32px; width: 100%; height: 100%; display: block; object-fit: cover;}
.card-content {z-index: 5;}
.card-content .btn {margin-top:50px;}
.card-content p {color: var(--body-color); margin-top:10px}
.card .prompt  {color: var(--red); margin-bottom: 10px; display: block; font-size: 16px;}
/* button */
.slider-button { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; justify-content: center; align-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: var(--white); cursor: pointer; z-index: 5; border: none; opacity: 0; visibility: hidden; transition: transform 0.2s ease-out; display: none;}
.slider:hover .slider-button {opacity: 1; visibility: visible;}
.slider-button span {font-size: 20px;} /*< > */
.slider-button-prev {left: 15px;}
.slider-button-next {right: 15px;}
.slider-button:hover {background: rgba(0, 0, 0, 0.8);}
/* Pagination */
.slider-pagination {width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top:30px;}
.slider-pagination-dot {width: 45px; height: 5px; border-radius: 4px; background: var(--grey); cursor: pointer; border: none;}
.slider-pagination-dot.active {background: var(--black);}

@media (min-width: 1000px) {
    .slider-button {display: flex;}
    .slider-wrapper, .card {height: 389px;}
    .card-content p {max-width: 50%;}
    .card {padding: 48px;}
    .card .prompt {font-size: 20px;}
}