<div class="box"></div>
<div class="box"></div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #ef921f;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  place-content: center;
  gap: 40px;
  padding: 20px;
}

.box {
  min-height: 50vmin;
  min-width: 50vmin;
  border-radius: 6px;
  background-color: #fff;
  align-self: center;
  justify-self: center;
  box-shadow: var(--shadow, none);
}

.box:nth-child(1) {
  --shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3);
}

.box:nth-child(2) {
  --shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075);
}