body {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 background-color: #0e100f
}
* {
 position: relative;
 box-sizing: border-box;
}

.image-content {
 width: 100%;
 max-width: 400px;
}

.description {
 border-top: 0.0625rem solid #e3dddd;
 margin: 2rem 0;
}

.button {
 position: relative;
 display: inline-block;
 background: #3e3e3f;
 color: #fff;
 border: none;
 border-radius: 0;
 padding: 1.25rem 2.5rem;
 font-size: 1rem;
 text-transform: uppercase;
 cursor: pointer;
 letter-spacing: 0.0625rem;
}

.image-container::before {
 float: left;
 padding-top: 133.76623376623376%;
 content: "";
}

.image-container::after {
 display: block;
 content: "";
 clear: both;
}

.images {
 width: 100%;
 height: 100%;
 position: absolute;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: 8px;
 grid-template-areas:
 "img-1 img-1 img-1"
 "img-1 img-1 img-1"
 "img-1 img-1 img-1"
 "img-2 img-3 img-4";
}

.product {
 background-size: 75%;
 background-position: center;
 background-repeat: no-repeat;
 cursor: pointer;
 border: 1px dashed #fffce1;
 will-change: transform;
 background-color: #0e100f;
}

.product[data-grid="img-1"] {
 grid-area: img-1;
 z-index: 1;
 cursor: default;
}

.product[data-grid="img-2"] {
 grid-area: img-2;
}

.product[data-grid="img-2"] {
 grid-area: img-3;
}

.product[data-grid="img-4"] {
 grid-area: img-4;
}

.product-1 {
 background-image: url("https://assets.codepen.io/16327/ui-flair-1.png");
}

.product-2 {
 background-image: url("https://assets.codepen.io/16327/ui-flair-2.png");
}

.product-3 {
 background-image: url("https://assets.codepen.io/16327/ui-flair-3.png");
}

.product-4 {
 background-image: url("https://assets.codepen.io/16327/ui-flair-4.png");
}

@media (max-width: 800px) {
 .app {
 flex-direction: column;
 }

 .main-content {
 padding-top: 1.5rem;
 }
}