삼분할 법칙

<div class="frame">
  <div class="grid"></div>
  <div class="sun" id="sun"></div>
  <div class="ground"></div>
</div>

.frame{position:relative;width:min(92%,420px);aspect-ratio:3/2;overflow:hidden;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 30%,var(--bg)) 0%,color-mix(in oklab,var(--accent) 8%,var(--bg)) 62%)}
.ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:color-mix(in oklab,var(--accent-3) 35%,var(--bg))}
.sun{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 30px color-mix(in oklab,var(--accent-2) 60%,transparent);
  left:33.33%;top:33.33%;transform:translate(-50%,-50%);
  animation:move 6s ease-in-out infinite}
.grid{position:absolute;inset:0}
.grid::before,.grid::after{content:'';position:absolute;background:rgba(255,255,255,.5)}
.grid::before{left:33.33%;top:0;bottom:0;width:1px;box-shadow:calc(33.33% - 1px) 0 0 rgba(255,255,255,.5)}
.grid::after{top:33.33%;left:0;right:0;height:1px;box-shadow:0 calc(33.33% - 1px) 0 rgba(255,255,255,.5)}
@keyframes move{
  0%,20%{left:33.33%;top:33.33%}
  50%,70%{left:66.66%;top:66.66%}
  100%{left:33.33%;top:33.33%}
}