/* variables para font-size */
:root {
  --fs-xxxs: 0.5rem;    /*  8px */
  --fs-xxs: 0.625rem;   /* 10px */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
}

* {
  /* outline: 1px solid red; */
  margin: 0;
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  display: flex;
  justify-content: center;
  align-items: center;
}

.container {

  margin: 32px 0;

  display: grid;
  grid-auto-columns: 200px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    "box-4"
    "box-3"
    "box-2"
    "box-1"
  ;
  gap: 16px;
}


/* estilos de las box general */
.box {
  border-radius: 8px;
  padding: 16px;
  color: #fff;
}

.box-header, .box-footer {
  font-size: var(--fs-xxxs);
}

.box-center, .box-4 > p {
  font-size: 1.625rem;
}


/* estilos de las boxes específicas */
/* box 1 */
.box-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-image: url("https://cdn.prod.website-files.com/67c9be2dd6fd7f17e1214309/67cf09008078887c554a67bf_Serene%20Listening.webp");
  background-size: cover;
  background-position: center;

  grid-area: box-1;

  /* nesting */
  .box-header {
    text-align: center;
  }
}

.box-1 div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* box 2 */
.box-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background-image: url("https://i.pinimg.com/736x/73/91/b0/7391b075ca5ed79615fd5505821d6b6b.jpg");
  background-size: cover;
  background-position: top;
  filter: grayscale(60%); /* filtro de color */

  grid-area: box-2;
}


/* box 3 */
.box-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #bbff2b;

  grid-area: box-3;
}

.box-3 > p {
  width: 80%;
  color: #0f0f0f;
  font-size: var(--fs-sm);
  font-weight: bold;
}

.box-3 > button {
  width: max-content;
  font-size: var(--fs-xs);
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 18px;

  transition: background-color .5s;
}

button:hover {
  background-color: #3d77ad;
  color: white;
}


/* box 4 */
.box-4 {
  display: flex;
  justify-content: center;
  align-items: center;

  background:
    linear-gradient(rgba(0, 0, 0, 0.096), rgba(0, 0, 0, 0.123)),
    url(https://zerojustice315.wordpress.com/wp-content/uploads/2016/02/310510.png) center / cover;

  grid-area: box-4;
}


/* media querys */
@media (width >= 450px) {
  .container {
    grid-template-areas: 
      "box-1 box-2"
      "box-3 box-4"
    ;
  }
}

@media (width >= 720px) {
  .container {
    grid-auto-columns: 250px;
    grid-template-areas: 
      "box-1 box-2"
      "box-1 box-3"
      "box-4 box-4"
    ;
  }
}

@media (width >= 990px) {
  .container {
    grid-auto-columns: 200px;
    grid-auto-rows: 250px;
    grid-template-areas: 
      "box-1 box-1 box-4 box-4"
      "box-1 box-1 box-2 box-3"
    ;
  }
}