body {
    max-width: 140rem;
}


/* ######################################################## */
/* ARTICLE:                             */
/* ######################################################## */
.browse-by-format {
  margin: 1rem auto;
  margin-bottom: 0;
  background-color: #f1f3f5;
  padding: 2.4rem 4.8rem;
  color: #343a40;
}

/*
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      */

.browse-by-format h1 {
  font-size: 4.4rem;
  padding-bottom: 2.4rem;
}

.browse-by-format h2 {
  font-size: 3.6rem;
  padding-bottom: 2.4rem;
}
.browse-by-format p {
  font-size: 2.4rem;
  padding-bottom: 1.2rem;
  line-height: 1.5;
}

/* ######################################################## */
/* ARTICLE:                             */
/* ######################################################## */

.card-format-note {
  margin: 3.6rem 6.4rem;

  background-color: #1864ab; 
  border-radius: 10px;
}

/* 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */

/* - Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */
.card-format-note h1 {
  color: #d0ebff;

  padding: 3.6rem 5.2rem;
  font-size: 3rem;
  font-weight: 500;
  padding-bottom: 0rem;
}

.card-arguments {
  padding: 3rem 4.8rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.card-format-button:link,
.card-format-button:visited {
  font-size: 3rem;
  font-weight: 400;
  background-color:  #ffa94d; 
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 1.2rem 3.4rem;
  border-radius: 6px;
  transition: all 0.3s;
}

.card-format-button:hover,
.card-format-buttona:active {
  color:  #1864ab; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  background-color: #d0ebff;
}



@media (max-width: 30em) {
   
.card-format-note {
    margin: 3.6rem 3.2rem;
  }
  .browse-by-format {
    
    padding: 2.4rem 2.4rem;
    
  }  
}


@media (max-width: 20em) {
   
    .card-format-note {
        margin: 2.4rem 1.8rem;
      }
    
    .browse-by-format {    
       padding: 2.4rem 1.2rem;
    }  
}