.parent {
    min-height: calc(100% - 24px);
    display: grid;
    grid-template-columns: .6fr repeat(2, .2fr);
    grid-template-rows: .4fr repeat(3, .2fr);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #333;
    padding: 12px;
}

.parent > div{
    border: 4px solid #ccc;
    border-radius: 16px;
    overflow-y: scroll;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
    background-color: #e5e5f7;
    opacity: 1;
    background-image: repeating-radial-gradient(
        circle at 0 0,
        transparent 0,
        #e5e5f7 30px
        ),
        repeating-linear-gradient(#ffb5b58a, #ffb8b8);
}
.div2 {
    grid-area: 1 / 2 / 4 / 4;
    max-height: 80vh;
}
.div3 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #35a527;
}
.div4 {
    grid-area: 3 / 1 / 4 / 2;
    background-color: rgb(35, 35, 155);
}
.div5 {
    grid-area: 4 / 1 / 5 / 2;
    background-color: rgb(197, 186, 37);
}
.div6 {
    grid-area: 4 / 2 / 5 / 4;
    background-color: rgb(25, 146, 146);
}


html, body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: monospace;
    font-size: large;
}

.parent{
    --color: rgba(114, 114, 114, 0.3);
  background-color: #191a1a;
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
      linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
  background-size: 55px 55px;
}
.repo-card{
    padding: 16px;
    color: #ccc;
    font-family: serif;
    background-color: #444;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    scrollbar-width: thin;
}
.repo-card > h2{
    padding: 0px;
    color: #eee;
    margin: 0px;
}
.repo-card > a{
    color: #bbf;
    margin: 0px;
}
.repo-card > p{
    margin: 0px;
}