body {
    background-color: #222831;
}

#container {
    display: grid;
    grid-template-areas: 
        "ch ch ch"
        "c1 c1 c2"
        "c3 c3 c4"
        "c3 c3 c5"
        "c6 c7 c5";
    gap: 8px;
    grid-template-rows: 200px 338px 788px 150px 450px;
    grid-template-columns: 375px 375px 599px;

    width: 1274px;
    height: 1703px;
    margin: 0 auto;

    
    font-family: "Lato", sans-serif;
}

.ch {
    grid-area: ch;
    background-color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 48px;
}

.c1 {
    grid-area: c1;
    background-color: #000000;
}

.c2 {
    grid-area: c2;
    background-color: #000;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 237 / 133; /* Smae as image */
    max-height: 100%;

    position: relative;
    overflow: hidden;
}


.c2 figure {
  width: 100%;
  height: 100%;
}

.c2 img {
  width: 100%;
  height: 100%;
}

.c2 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 10px;

  color: white;
  text-align: center;
  font-size: 16px;
}

.c3 {
    grid-area: c3;
    background-color: lightgoldenrodyellow;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    font-size: 40px;
    line-height: 1.5;
    color: #333;
    font-family: "Domine", serif;
    font-weight: 400;
}

.c4 {
    grid-area: c4;
    background-color: #000;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1000 / 1323; /* same as image */
    max-height: 100%;
    
    position: relative;
    overflow: hidden;
}

.c4 img {
    height: 100%;
    width: 100%;
}

.c5 {
    grid-area: c5;
    background-color: #a1f0ec;

    display: flex;
    padding: 24px;

    font-size: 18px;
    line-height: 1.7;
    color: #222;
    font-family: "Figtree", sans-serif;
    font-weight: 400;

    height: 298px; /* Dont go below end of grid */
}

.c5 ol {
    list-style-type: decimal;
    margin-left: 24px;
}

.c5 ol li {
    position: relative;
    padding-right: 175px;
}

.c5 .price {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    font-family: 'Courier New', Courier, monospace;
    color: #0a0a0a;
    font-weight: 600;
}

.c6 {
    grid-area: c6;
    background-color: #000066;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 2 / 1;
    max-height: 100%;

    position: relative;
    overflow: hidden;
}

.c6 img {
    width: 100%;
    height: 100%;
}

.c7 {
    grid-area: c7;
    background-color: #000;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 2 / 1;
    max-height: 100%;

    position: relative;
    overflow: hidden;
}

.c7 img {
    width: 100%;
    height: 100%;
}

.c7 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 10px;
  
  color: white;
  text-align: center;
  font-size: 16px;
}