:root {
    --ff-sans: 'Poppins' , sans-serif;
    
    --fw-light: 200;
    --fw-normal:400;
    --fw-bold: 600;

    --fs-400:0.9275rem;
    --fs-500:1.25rem;
    --fs-600:1.625rem;
    --fs-900:2.5rem;

    --clr-Red: hsl(0, 78%, 62%);
    --clr-teal: hsl(180, 62%, 55%);
    --clr-yellow: hsl(34, 97%, 64%);
    --clr-Blue: hsl(212, 86%, 64%);


    --clr-neutral-900: hsl(234, 12%, 34%);
    --clr-neutral-400: hsl(229, 6%, 66%);
    --clr-neutral-100: hsl(0, 0%, 98%);

}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    font-family: var(--ff-sans);
    font-weight: var(--fw-normal);
    line-height: 1.7;
}

body{
    margin: 0;
}

h1,
h2,
h3 {
    color: var(--clr-neutral-900);
    line-height: 1.2;
}
 
.wrapper {
    max-width: 1200px;
    margin-inline: auto;
}

.wrapper--narrow {
    max-width: 550px;
}

header {
    text-align: center;
    margin-block: 6rem;
}

h1 {
    font-size: var(--fs-900);
    font-weight: var(--fw-light);
}
header > p {
    font-size: var(--fs-500);
}
h1 span {
    font-weight: var(--fw-bold);
}
.layout-grid {
    --gap: 2rem;
    display: flex;
    gap: var(--gap);
}

.layout-grid > * {
    flex: 1;
}
.col{
    display: grid;
    gap: var(--gap);
    align-content: center;

}
.card {
    padding: 2rem;
    border-top: 8px solid;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 1.5rem -0.5rem rgb(0 50 100 /  0.15);
}
p{
    color: var(--clr-neutral-400);
}

.card__title {
    font-size: var(--fs-600);
    margin: 0;
}

.card__img{
    display: block;
    margin-top: 2rem;
    margin-left: auto;

}
.border-teal {
    border-color: var(--clr-teal);
}
.border-red {
    border-color: var(--clr-Red);
}
.border-yellow {
    border-color: var(--clr-yellow);
}
.border-blue {
    border-color: var(--clr-Blue);
}

@media screen and (max-width: 480px) {
    .layout-grid {
        --gap: 2rem;
        display: grid;
        gap: var(--gap);
    }
    .card{
        margin-right: 2rem;
        margin-left: 2rem;
        
    }
    .card:last-of-type{
        margin-bottom: 2rem;
    }
  }