* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  background-image:"bg.jpg";
  scroll-behavior: none;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 2800px;
  height: 100%;
}

.slider-inner {
  position: absolute;
  top: 15%;
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.item {
  position: relative;
  width: 400px;
  height: 100%;
  overflow: hidden;
}

.image {
  position: absolute;
  left: -100px;
  width: 600px;
  height: 100%;
  background-size: cover;
  background-position: center;
}

margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
}

.images-wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(300px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
min-height: 100vh;
grid-gap: 1rem;
}

.images-wrapper .img-cont {
overflow: hidden;
}

.images-wrapper .img-cont img {
width: 100%;
height: 100%;
-o-object-fit: cover;
   object-fit: cover;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.images-wrapper .img-cont img:hover {
-webkit-transform: scale(1.1);
        transform: scale(1.1);
}

.full-image-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
    justify-content: space-around;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
padding: 0rem 1rem;
opacity: 0;
pointer-events: none;
}

.full-image-container .full-image {
width: 600px;
max-width: 100%;
min-height: 50vh;
-o-object-fit: cover;
   object-fit: cover;
}

.full-image-container .image-title {
color: #ffffff;
background: #ff6464;
border-radius: 12px;
padding: 0.5rem 1rem;
text-transform: capitalize;
}

.full-image-container.open {
opacity: 1;
pointer-events: all;
}