@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  background-color:#DDE1D4;
  padding:15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  max-width: 650px;
  width: 100%;
  height: 100vh;
  margin:0 auto;

  box-sizing: border-box;
  min-width: 650px;
}

.poster {
  height: 100%;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 7fr 5fr;
  grid-template-areas:
    "header header header"
    "bad bad bad-next"
    "religion religion religion";
  gap: 15px;

  container-type: size;
}

.poster-item-padding {
  padding: 15px;
}

.poster-item-vertical-padding {
  padding: 15px 0;
}

.poster-header {
  grid-area: header;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  background-color: black;
  color: white;
}

.poster-header > div:first-child {
  grid-column: 1 / span 2;

  display: flex;
}

.poster-header > div:last-child {
  grid-column: -2 / -1;
}

.poster-bad {
  grid-area: bad;

  display: flex;
  align-items: flex-end;
}

.poster-bad-next {
  grid-area: bad-next;
}

.poster-religion {
  grid-area: religion;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.poster-religion span:not(.huge-font) {
  font-size: 20px;
  color: #d9e6d3;
}

.huge-font {
  font-size: 18cqmin;
  font-weight: bold;
  line-height: normal;
}

.poster-item-flex-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.poster-main {
  background-color: #f14011;
}

.poster-bad .huge-font {
  margin-bottom: -3cqmin;
}

.poster-religion .huge-font {
  margin-top: -7cqmin;
}