<style>

*{
    box-sizing:border-box;
}

body{
    margin:20px;
    font-family:Arial,Helvetica,sans-serif;
    background:#(247, 242, 235);
}

/* Layout */

.container{
    display:grid;
    width: 50pc;
    gap:30px;
    
}

/* Slideshow */

.slideshow{
    background:rgb(247, 242, 235);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    box-shadow: 2px 2px 2px gray;
}

.slide{
    display:none;
    height: fit-content;
max-width: 40pc;
}

.slide img{
    width:100%;
    height:auto;
    display:block;
}

/* Caption */

.caption{
    padding:12px;
    text-align:center;
    font-size:18px;
    background:#333;
    color:#f3f0f0;
}

/* Navigation Dots */

.dots{
    text-align:center;
    padding:15px;
  
}

.dot{
    cursor:pointer;
    height:30px;
    width:30px;
    margin:0 5px;
    background:#bbb;
    border-radius:50%;
    display:inline-block;
    transition:.3s;
}

.dot:hover{
    background:#666;
}

.dot.active{
    background:#222;
}

/* Fade Animation */

.fade{
    animation:fade .6s;
}

@keyframes fade{
    from{opacity:.4;}
    to{opacity:1;}
}

/* Mobile */

@media(max-width:768px){

.container{
    grid-template-columns:1fr;
}

}

</style>
