.default-parent-grid{
    display: grid;
    row-gap: 5px;
    column-gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Creates 4 equal-width columns */
    grid-template-rows: 1fr 1fr 1fr 1fr; 
}
.default-parent-grid > .box{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 350px;
}

.parent-grid-2col3row{
    display: grid;
    row-gap: 5px;
    column-gap: 100px;
    grid-template-columns: 70px 70px; /* Creates 4 equal-width columns */
    grid-template-rows: 100px 100px 100px; 
}
.parent-grid-2col3row > div{
    
}
.default-parent-grid > .box{
    max-height: 70px; /*elements dont SCALE image*/
    border-radius: 10px;
}

.trans-grid{
   background-color: rgba(255, 255, 255, 0.496);
   border-style: solid;
}
.yellow-trans-grid{
    background-color: rgba(244, 231, 133, 0.496);
    border-style: solid;
}

.grid-flexbox{
    display: flex;
    justify-content: space-between; /* Distributes space evenly between items */
    flex-direction: column;
    align-items: center; /* Aligns items vertically in the center */
    gap: 10px; /* Space between flex items */
}
.grid-flexbox-row{
    display: flex;
    justify-content: space-evenly; /* Distributes space evenly between items */
    flex-direction: row;
    align-items: center; /* Aligns items vertically in the center */
    
}
.bg-mail{
 
    background-image: url("/images/logos_sprite2.png");
    background-size: 300px 200px;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-color: white;
    border-style: solid;
  }
.bg-insta{

    background-image: url("/images/logos_sprite1.png");
    background-size: 300px 200px;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-color: white;
    border-color: black;
    border-style: solid;
}

    
/*
 grid-column-start: 0; 1-n
  grid-column-end: 0;
  grid-row-start: 0;
  grid-row-end: 0;
*/

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box2{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
}
.box3{
    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
}
.box4{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 175px;
    max-height: 31px;
    border-radius: 10px;
    text-align: center;

}
.box4_1{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 175px;
    max-height: 31px;
    text-align: center;
    border-radius: 10px;
}
.box5{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 5;
}