.prompt-section{
  background:var(--bg-color);
}

.prompt-section .container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

.prompt-section h2{
  text-align:center;
  font-size:64px;
  line-height:1.1;
  margin-bottom:50px;
  color:var(--heading-color);
}

/* LIST */

.prompt-list{
  display:flex;
  flex-direction:column;
  gap:var(--card-gap);
}

/* ITEM */

.prompt-item{
  display:flex;
  align-items:center;
  gap:18px;

  background:var(--card-bg);

  padding:18px 24px;

  border-radius:var(--card-radius);

  transition:.3s ease;
}

.prompt-item:hover{
  transform:translateY(-2px);
}

/* ICON */

.prompt-icon{
  width:40px;
  height:40px;

  min-width:40px;

  border-radius:10px;

  background:var(--icon-bg);

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

  color:var(--icon-color);
}

/* glyph is the item icon as a CSS mask, so --icon-color recolors it to any
   color (default white). Keeps the rounded square on --icon-bg (default gold). */
.prompt-glyph{
  display:block;
  width:16px;
  height:16px;
  background-color:var(--icon-color);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-size:contain;
          mask-size:contain;
}

/* fallback for the rare browser without mask support: show the raw icon */
@supports not ((-webkit-mask-image:url(x)) or (mask-image:url(x))){
  .prompt-icon img{ width:14px; height:14px; display:block; }
}

/* TEXT */

.prompt-text{
  color:var(--prompt-color);

  font-size:24px;
  line-height:1.6;
}

/* TABLET */

@media(max-width:992px){

  .prompt-section h2{
    font-size:48px;
  }

  .prompt-text{
    font-size:20px;
  }

}

/* MOBILE */

@media(max-width:767px){

  .prompt-section h2{
    font-size:34px;
    margin-bottom:35px;
  }

  .prompt-item{
    padding:16px;
    gap:12px;
  }

  .prompt-icon{
    width:34px;
    height:34px;
    min-width:34px;
  }

  .prompt-text{
    font-size:16px;
    line-height:1.5;
  }

}