* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px default browser */
  -webkit-text-size-adjust: 100%; /* cegah font auto resize di iOS */
}


.background {
  background-color: #f4d04e;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: hsl(0, 0%, 100%);

  /*RESPONSIVE*/
  /* max-width: 25vw;
  width: 25vw; */
  /* max-height: 76vh;
  height: 76vh; */
  max-width: 24rem;
  width: 100%;

  max-height: 32.625rem;
  height: 32.625rem;

  padding: 1.5rem;
  border-radius: 1.25rem;
  box-shadow: 0.5rem 0.5rem 0 hsl(0, 0%, 7%);
  gap: 1.5rem;
  /*PX*/ 
  /*max-width: 384px;
    */ /*max-height: 522px;
    */ /*width: 384px;
    */ /*height: 522px;
    */ /*padding: 24px;
    */ /*border-radius: 20px;
    */ /*-webkit-border-radius: 20px;
    */ /*-moz-border-radius: 20px;
    */ /*-ms-border-radius: 20px;
    */ /*-o-border-radius: 20px;
    */ /*box-shadow: 8px 8px 0 hsl(0, 0%, 7%);
    */ /*gap: 24px;
    */ /*border: 1px solid hsl(0, 0%, 7%);
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.5));
    -webkit-filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.5));
    */
}

.pict img {
  width: 100%;
  border-radius: 0.625rem;
  /* width: 21.9vw; */
  /* border-radius: 0.7vw; */
  /*width: 336px;
  *//*border-radius: 10px      */;
}

.body-card {
  gap: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.body-card .genre {
  background-color: #f4d04e;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 5.125rem;
  height: 1.813rem;
  border-radius: 0.25rem;

  /* width: 5.35vw; */
  /* height: 4vh; */
  /* border-radius: 0.25vw; */
  /*width: 82px;
    */ /*height: 29px;
    */ /*border-radius: 4px;
    */
}

.body-card .genre p {
  font-size: 0.875rem;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  color: hsl(0, 0%, 7%);

  /* font-size: 14px */
}

.text {
  font-family: "Figtree", sans-serif;
  line-height: 150%;
}

.body-card .text {
  font-family: "Figtree", sans-serif;
  line-height: 150%;
}

.body-card .text.time {
  font-size: 0.875rem;
  /* font-size: 14px; */
  font-weight: 500;
  color: hsl(0, 0%, 7%);
}

.body-card h1 {
  font-size: 1.5rem;
  /* font-size: 24px; */
  font-family: "Figtree", sans-serif;
  font-weight: 800;
  color: hsl(0, 0%, 7%);
}

.body-card h1:hover {
  color: #f4d04e;
  cursor: pointer;
  transition: color 0.2s ease;
}

.body-card .text.text-body {
  font-size: 1rem;
  /* font-size: 16px; */
  font-family: "Figtree", sans-serif;
  font-weight: 500;
  color: hsl(0, 0%, 42%);
}

.by-card {
  display: flex;
  gap: 0.75rem;
  /* gap: 12px; */
  align-items: center;
}

.name {
  font-size: 0.875rem;
  /* font-size: 14px; */
  font-weight: 800;
  color: hsl(0, 0%, 7%);
}

/* 3. Breakpoints */

/* 2. Layout default untuk mobile kecil (320px - 360px) */
/* @media (min-width: 320px) {
  .card{
    max-width: 100rem;
  }
} */

/* @media (min-width: 361px) {
} */

/* Mobile sedang (≥ 414px) */
/* @media (min-width: 414px) {
} */

/* Tablet potrait (≥ 768px) */
/* @media (min-width: 768px) {
} */

/* Tablet landscape / desktop kecil (≥ 1024px) */
/* @media (min-width: 1024px) {
} */

/* //Desktop besar (≥ 1440px)
@media (min-width: 1440px) {

} */