* {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    background: black;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    grid-auto-rows: minmax(calc(100vh / 3), calc(100vh / 3));
}

.wrapper div {
    position: relative;
    overflow: clip;
    font-size: 0;
    text-align: center;
    border: 1px #ec1d23 solid;
	display: flex;
}

.wrapper div .title {
    position: absolute;
    bottom: 4px;
    left: -20px;
    z-index: 10;
    width: 220px;
	padding: 8px;
}

.wrapper div img {
    display: inline-block;
    max-width: 100%;
	width: 100%;
	height: 100%;
}

.wrapper .images {
	display: grid;
	grid-template-rows: 1fr;
	width: 100%;
}

.wrapper .images.one {
	grid-template-columns: 1fr;
}
.wrapper .images.two {
	grid-template-columns: repeat(2, 1fr);
}
.wrapper .images.three {
	grid-template-columns: repeat(3, 1fr);
}


.bh {
    grid-column: 1 / 3;
    grid-row: 1;
}

.nv {
    grid-column: 3 / 5;
    grid-row: 1;
}

.dp {
    grid-column: 1 / 3;
    grid-row: 2;
}

.op {
    grid-column: 3 / 5;
    grid-row: 2;
}

.sn {
    grid-column: 1 / 3;
    grid-row: 3;
}

.cp {
    grid-column: 3 / 5;
    grid-row: 3;
}

.info {
    background: black;
    grid-column: 4 / 5;
    grid-row: 1;
}

.info svg {
    position: absolute;
    max-width: 1080px;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
}

.info svg .logo {
    fill: #ec1d23;
}

.info svg .logo-text {
    fill: white;
}

.reverse {
    transform: rotate(180deg);
}