横向滚动轮播图中首个元素尺寸为0x0且gap属性不生效的问题求助

我最近在做一个简单的产品页面，用来练习和加深对前端核心概念的理解，但遇到了个棘手的问题：媒体查询里设置的.carousel网格布局出异常了——第一个元素渲染后的宽高居然是0x0，而且明明在媒体查询里定义了gap属性，却完全没生效。我翻来覆去检查了好几次都没找到原因，有没有大佬能帮我看看呀？

我的代码片段如下： #

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Carrousel</title>
  <style>

CSS部分：

* { /* reset the styles */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  margin-top: 48px;
}

main {
  margin-top: 48px;
}

img {
  max-width: 100%;

备注：内容来源于stack exchange，提问作者Juan José Briasco