*{
    margin: 0;
}

body {
  
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.fullcontainer {
    display: flex;
    flex-direction: row-reverse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  gap: 20px;
  max-width: 1100px;
  margin: auto;
  width: 900px;      /* fixed width */
  height: auto;
  margin: 150px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  
}

/* Left grid */
.bigcontainer {
  display: grid;
  gap: 20px;
  grid-template-columns: 2fr 1fr 1.4fr;      /* Daniel wide (2 cols), Jonathan narrow */
  grid-template-rows: auto auto;
  grid-template-areas:
    "daniel daniel jonathan"
    "jeanette patrick patrick";
}

/* Example card styles */
.danielcard {
  background-color: blueviolet;
  color: white;
  padding: 20px;
  border-radius: 10px;
  background-image: url(./images/bg-pattern-quotation.svg);
  background-position: top right 50px; 
  position: relative;
  background-repeat: no-repeat;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  
}

.johnathancard {
  background-color: hsl(217, 19%, 35%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.jeanettecard {
  background-color: white;
  color: black;
  padding: 20px;
  border-radius: 10px;
  grid-column: 1;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.patrickcard {
  background-color: hsl(219, 29%, 14%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 30px 16px rgba(0,0,0,0.15);
  
}

/* Right side (Kira card) */
.kiracard {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 320px; 
}

.profile{
    display: flex;
    gap: 10px;
    align-content: center;
    

}

img{
    width: 40px;
    border-radius: 30px;
    align-content: center;
}

.name{
    font-size: 15px;
}

.category{
    font-size: 15px;
}

.maintitle {
    font-weight: 600;
    margin-top: 10px;
    font-size: 20px;

}

.mainparagraph{
    margin-top: 10px;
    font-size: 12px;
    
    line-height: 18px;
    font-weight: 200;
}



.patrickcard {
  background-color: hsl(219, 29%, 14%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  grid-column: 2;
}

.danielcard    { grid-area: daniel; }
.johnathancard { grid-area: jonathan; }
.jeanettecard  { grid-area: jeanette; }
.patrickcard   { grid-area: patrick; }

@media (max-width: 428px) {
  .fullcontainer{
    flex-direction: column-reverse;
  }
}

@media (max-width: 428px) {
  .bigcontainer{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}