.banner{
   grid-column: 2/8;
   grid-row: 3/4;
   background-color: #ffffff ;
   position: relative;
}

.slideshow{
   width:70%;
   height: 490px;
   margin: auto;
   padding: 3px 0px;
   overflow: hidden;
} 

.slideshow-wrapper{
    display: flex;
    width: 400%;
    height: 100%;
    position: relative;
    animation: slideshow 50s infinite;
    overflow: hidden;
}

.slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slideshow{
    0% {left:0}

    10% {left:0}

    15% {left:-100%}

    25% {left:-100%}

    30% {left:-200%}

    40% {left:-200%}

    45% {left:-300%}

    55% {left:-300%}

    60% {left:-200%}

    70% {left:-200%}

    75% {left:-100%}

    85% {left:-100%}

    90% {left:0}
}

.slide-btn{
    width: 1.3rem;
    height: 1.3rem;
    background-color: #bbb;
    border: .2rem solid #d38800;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    position: absolute;
    top:95%;
    transform: translateX(-50%);
    z-index:10;
}

.slide-btn:focus{
    background-color:#12376e ;
}

.slide-btn-1{
    left: 47%;
}

.slide-btn-2{
    left: 49%;
}

.slide-btn-3{
    left: 51%;
}

.slide-btn-4{
    left: 53%;
}

.slide-btn-1:focus ~ .slideshow-wrapper {
    animation: none;
    left:0;
}

.slide-btn-2:focus ~ .slideshow-wrapper {
    animation: none;
    left:-100%;
}

.slide-btn-3:focus ~ .slideshow-wrapper {
    animation: none;
    left:-200%;
}

.slide-btn-4:focus ~ .slideshow-wrapper {
    animation: none;
    left:-299.98%;
}
    

@media(max-width:600px){

   .slideshow{
     width:97%;
     height: 490px;
     margin: auto;
     padding: 3px 0px;
     overflow: hidden;
    /* border: #12376e solid .2rem; */
   }
 
   .slide img{
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
}