.slide-container {
    width: 100%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 35s infinite linear 1s both;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}

 .slide-paused:hover .slide-wrapper {
   animation-play-state: paused;
 }
 .slide-paused:hover .slide-wrapper img:hover {
   opacity: .8;
   cursor: pointer;
 }

@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}

.card__content {
  position: relative;
  max-width: 100%;
  }
  
.card__content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 100%;
  background-image:linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
.card__content img{
  max-width: 500px;
  margin-top:30px;
 }

.card__content p{
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  bottom: 0;
  z-index:999;
}

@media screen and (max-width: 960px) {
  
.card__content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  height: 100%;
  background-image:linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
 }

.card__content img{
  max-width: 450px;
  margin-top:30px;
 }
}

@media screen and (max-width: 600px) {
  
.card__content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
 }

.card__content img{
  max-width: 100%;
  margin-top:30px;
 }
}