@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  animation: grid-container 1s ease-in forwards;
}

body{
  background-color: #101010;
  color: #FFFFFF;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  display: grid;
  place-content: center;
}

p{
  font-size: .75rem;
  color: #FFFFFF;
}

h1, h2, h3 {
  background-color: #FFA0A5;
  background: linear-gradient(to right, #FF8990 10%, #FFF 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: auto;
}

i {
  font-size: 2.5rem;
  margin: auto;
}

.logo{
  display: grid;
}

.grid-container{
  max-width: 900px;
  margin: 1rem;
  display: grid;
  grid-auto-colums: 1fr;
  gap: .5rem;
  grid-template-areas: 
    "box1  box2  box3  box4  box4  box5  box5"
    "box6  box6  box7  box7  box7  box8  box9"
    "box10 box11 box7  box7  box7  box8  box9"
    "box12 box12 box13 box13 box13 box14 box14";
}

.grid-item{
  background-color: #1D1D1D;
  padding: .5rem 1rem;
  text-align: center;
  display: flex; 
  flex-direction: column;
  border-radius: .75rem;
  overflow: hdden;
  transition: all 200ms ease;
}

.grid-item-1{
  grid-area: box1;
}
.grid-item-2{
  grid-area: box2;
}
.grid-item-3{
  grid-area: box3;
}
.grid-item-4{
  grid-area: box4
}
.grid-item-5{
  grid-area: box5;
}
.grid-item-6{
  grid-area: box6;
}
.grid-item-7{
  grid-area: box7;
}
.grid-item-8{
  grid-area: box8;
}
.grid-item-9{
  grid-area: box9;
}
.grid-item-10{
  grid-area: box10;
}
.grid-item-11{
  grid-area: box11;
}
.grid-item-12{
  grid-area: box12;
}
.grid-item-13{
  grid-area: box13;
}
.grid-item-14{
  grid-area: box14;
}

.grid-item-7 .background {
  background-color: #000;
  height: 100%;
  font-size: 4rem;
  display: grid;
  place-content: center;
  border-radius: .35rem;
}

.grid-item-7 .background span{
  background-color: #FFA0A5;
  background: linear-gradient(to right, #FFA0A5 20%, #FF8990 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
}

.grid-item-7 .background span i{
  -webkite-text-fill-color: #FFA0A5/* #FFFFFF*/
}

.grid-item-8 i,
.grid-item-9 i {
  font-size: 4rem;
}

.grid-item-8 h3, h2,
.grid-item-9 h3, h2 {
  marigin: 1rem auto;
}

.grid-item-10 h1 {
  font-size: 1.5rem;
}

@media (max-width: 768px){
  .grid-container {
    grid-template-areas:
      "box1  box2 box3 box6"
      "box4  box4 box4 box4"
      "box5  box7 box7 box10"
      "box9  box7 box7 box8"
      "box12 box12 box11 box11"
      "box13 box13 box 14 box14"
    ;
  }
}

@media(max-width: 540px) {
  .grid-container {
    grid-template-areas:
      "box1 box2"
      "box4 box4"
      "box10 box10"
      "box7 box7"
      "box7 box7"
      "box7 box7"
      "box12 box12"
      "box13 box13"
      "box14 box14"
      "box8 box9"
      "box3 box11"
      "box5 box6"
    ;
  }


 .grid-item {
   padding: .75 1rem;
 }
 .grid-item-7 .background {
   height: 250px;
 }
}