<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--card_width: 370px;
--row_increment: 10px;
--card_border_radius: 16px;
--card_small: 26;
--card_medium: 43;
--card_large: 45;
}
body {
0;
padding: 0;
padding-top: 5px;
/* background-color: grey; */
/* scroll-behavior:smooth; */
}
.pin_container {
100px auto;
padding: 0;
width: 3096vw;
height:100vh;
/* position: absolute;
left: 50%;
transform: translateX(-50%); */
display: grid;
grid-template-columns: repeat(auto-fill, var(--card_width));
column-gap: 15px;
/* grid-auto-rows: var(--row_increment); */
height: inherit;
justify-content: center;
align-items: center;
/* background-color: black; */
}
.card {
padding: 0;
10px 0px;
border-radius: var(--card_border_radius);
/* background-color: red; */
/* border:1px solid red; */
height:auto;
/* height: max-content; */
}
.card_small {
grid-row-end: span var(--card_small);
}
.card_medium {
grid-row-end: span var(--card_medium);
}
.card_large {
grid-row-end: span var(--card_large);
}
img{
/* height:fit-content; */
width:100%;
display: block;
object-fit: cover;
}
</style>
</head>
<body>
<div class="pin_container">
<!-- <div class="card card_small"></div>
<div class="card card_medium"></div> -->
<img src="Images/Card01.png" class="card card_medium">
<img src="Images/Card02.png" class="card card_medium">
<img src="Images/Card03.png" class="card card_medium">
<img src="Images/Card04.png" class="card card_medium">
<img src="Images/Card05.png" class="card card_medium">
<img src="Images/Card06.png" class="card card_medium">
<img src="Images/Card07.png" class="card card_medium">
<img src="Images/Card08.png" class="card card_medium">
<img src="Images/Card09.png" class="card card_medium">
<img src="Images/Card10.png" class="card card_medium">
<img src="Images/Card11.png" class="card card_medium">
<img src="Images/Card12.png" class="card card_medium">
<img src="Images/Card13.png" class="card card_medium">
<img src="Images/Card14.png" class="card card_medium">
<img src="Images/Card15.png" class="card card_medium">
<img src="Images/Card16.png" class="card card_medium">
<img src="Images/Card17.png" class="card card_medium">
<img src="Images/Card18.png" class="card card_medium">
<img src="Images/Card19.png" class="card card_medium">
<img src="Images/Card20.png" class="card card_medium">
<img src="Images/Card21.png" class="card card_medium">
<img src="Images/Card22.png" class="card card_medium">
<img src="Images/Card23.png" class="card card_medium">
<img src="Images/Card24.png" class="card card_medium">
<img src="Images/Card25.png" class="card card_medium">
<img src="Images/Card26.png" class="card card_medium">
<img src="Images/Card27.png" class="card card_medium">
<img src="Images/Card28.png" class="card card_medium">
<img src="Images/Card29.png" class="card card_medium">
<img src="Images/Card30.png" class="card card_medium">
<img src="Images/Card31.png" class="card card_medium">
<img src="Images/Card32.png" class="card card_medium">
<img src="Images/Card33.png" class="card card_medium">
<img src="Images/Card34.png" class="card card_medium">
<img src="Images/Card35.png" class="card card_medium">
<img src="Images/Card36.png" class="card card_medium">
<img src="Images/Card37.png" class="card card_medium">
<img src="Images/Card38.png" class="card card_medium">
<img src="Images/Card39.png" class="card card_medium">
<img src="Images/Card40.png" class="card card_medium">
<img src="Images/Card41.png" class="card card_medium">
<img src="Images/Card42.png" class="card card_medium">
<img src="Images/Card43.png" class="card card_medium">
<img src="Images/Card44.png" class="card card_medium">
<img src="Images/Card45.png" class="card card_medium">
<img src="Images/Card46.png" class="card card_medium">
<img src="Images/Card47.png" class="card card_medium">
<img src="Images/Card48.png" class="card card_medium">
<img src="Images/Card49.png" class="card card_medium">
<img src="Images/Card50.png" class="card card_medium">
<img src="Images/Card51.png" class="card card_medium">
<img src="Images/Card52.png" class="card card_medium">
<img src="Images/Card53.png" class="card card_medium">
<img src="Images/Card54.png" class="card card_medium">
<img src="Images/Card55.png" class="card card_medium">
<img src="Images/Card56.png" class="card card_medium">
<img src="Images/Card57.png" class="card card_medium">
<img src="Images/Card58.png" class="card card_medium">
<img src="Images/Card59.png" class="card card_medium">
<img src="Images/Card60.png" class="card card_medium">
<img src="Images/Card61.png" class="card card_medium">
<img src="Images/Card62.png" class="card card_medium">
<img src="Images/Card63.png" class="card card_medium">
<img src="Images/Card64.png" class="card card_medium">
<img src="Images/Card65.png" class="card card_medium">
<img src="Images/Card66.png" class="card card_medium">
<img src="Images/Card67.png" class="card card_medium">
<img src="Images/Card68.png" class="card card_medium">
<img src="Images/Card69.png" class="card card_medium">
<img src="Images/Card70.png" class="card card_medium">
<img src="Images/Card71.png" class="card card_medium">
<img src="Images/Card72.png" class="card card_medium">
<img src="Images/Card73.png" class="card card_medium">
<img src="Images/Card74.png" class="card card_medium">
<img src="Images/Card75.png" class="card card_medium">
<img src="Images/Card76.png" class="card card_medium">
<img src="Images/Card77.png" class="card card_medium">
<img src="Images/Card78.png" class="card card_medium">
<img src="Images/Card79.png" class="card card_medium">
<img src="Images/Card80.png" class="card card_medium">
<!-- <div class="card card_large"></div>
<div class="card card_medium"></div>
<div class="card card_small"></div>
<div class="card card_large"></div>
<div class="card card_medium"></div>
<div class="card card_small"></div>
<div class="card card_medium"></div>
<div class="card card_small"></div>
<div class="card card_medium"></div>
<div class="card card_large"></div>
<div class="card card_medium"></div>
<div class="card card_small"></div>
<div class="card card_medium"></div>
<div class="card card_large"></div> -->
</div>
<br/><br/>
</body>
</html>