* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Satoshi", sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  min-height: 100vh;
  width: 100%;
  background-color: black;
  color: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas:
    "hero hero quote spotlight"
    "hero hero palette spotlight"
    "hero hero items items"
    "hero hero items items";
  gap: 1rem;
  padding: 5px;
}

#hero {
  grid-area: hero;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

#quote {
  grid-area: quote;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#palette {
  grid-area: palette;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .5rem;
}

#swatch1 {
  background-color: #970102;
}

#swatch2 {
  background-color: #50008F;
}

#swatch3 {
  background-color: #110C5F;
}

#swatch4 {
  background-color: #DB5C7E;
}

#spotlight {
  grid-area: spotlight;
}

#items {
  grid-area: items;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "l tr"
    "l br";
  gap: 0.5rem;
}

#left {
  grid-area: l;
}

#top-right {
  grid-area: tr;
}

#bottom-right {
  grid-area: br;
}