html{
    font-family: system-ui, sans-serif; 
}
h1{
    font-size: 3.5rem;  
    color: #ad1639ff;
    font-weight: 900;
}
h2{
    color:firebrick;
    font-size: 3rem;
}
section{
    margin-inline: auto;
    width: 1200px;
}
key{
    font-style: italic;
    font-size: 0.8rem;
    color: black;
    margin-left: 4.7rem;
}
iframe{

    margin-left: 3rem;
    
}
p{
    font-size: 1.3rem;
    line-height:1.8rem;
    padding: 1rem;
}
.col2{
      column-count: 2;
      column-gap: 2rem;
}
.grid-container{
    background-color: #351a4d;
    padding: 2rem;
    margin: 1rem;
}
.grid-container h2{
    color: white;
}
.grid-container h2::before{
    content: url(https://res.cloudinary.com/clarity-strategies/image/upload/h_40/lupa.png)
}

.auto-grid {
    
    font-size: 1.3rem;
    line-height: 1.8rem;
    color: white;
    padding: 2rem;
    --auto-grid-min-size: 24rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
    grid-gap: 3rem;
  }