responsive image carousel with one last image - html

Question

I'm working hard on making a responsive image carousel but in the last stage (which I will explain) I can't get something to work. First let me give you what I have now, and then I will explain what suppose to happen.
html, body {
margin: 0;
overflow-x: hidden;
}
.vp-carousel {
width: 1000px;
height: 228px;
overflow: hidden;
margin-left: 50%;
transform: translate(-50%);
margin-top: 150px;
position: relative;
}
.carousel-wrapper {
height: 228px;
width: calc((1000px / 3) * 4);
}
.carousel-box {
display: inline-block;
width: calc(1000px / 3);
height: 100%;
margin-right: -4px;
position: relative;
}
.carousel-box img {height: 100%; width: 100%; }
.title {
position: absolute;
color: white;
z-index: 2;
height: 60px;
width: 100%;
text-align: center;
line-height: 30px;
top: calc(100% - 60px);
}
.mask {
width: 100%;;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
z-index: 1
}
#media screen and (max-width: 1080px) {
.vp-carousel {
width: calc(1000px * 0.66);
}
}
#media screen and (max-width: 700px) {
.vp-carousel {
width: calc(1000px * 0.33);
}
}
<div class="portfolio">
<div class="vp-carousel">
<div class="carousel-wrapper">
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
</div>
</div>
</div>
So what you see here is my simplified image carousel (to make it more clear), and in the last stage it show only one image (good!) but it's very small relative to the screen width of 700px (media query). What I want it to do is that it all increases to a bigger size (in ratio) and when the screen width gets smaller the image carousel decreases in size (in ratio).