.poppins-extralight {
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: normal;
  }

  .poppins-regular {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
  }

  .poppins-semibold {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
  }

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

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

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

    --clr-teal: hsl(180, 58%, 56%);
    --clr-red: hsl(0, 70%, 60%);
    --clr-blue: hsl(212, 75%, 62%);
    --clr-yellow: hsl(34, 89%, 65%);

  }


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

html{
    font-family: var(--ff-sans);
    font-weight: var(--fw-normal);
    line-height: 1.7;
    color: var(--clr-neutral-400);
}
body{
    margin: 0;
    padding-block-end: 5rem;
}

h1, h2, h3 {
    color: var(--clr-neutral-900);
    line-height: 1.1;
}

.wrapper {
    padding-inline: 32px;
    max-width: 1280px;
    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);

}

h1 span {
    font-weight: var(--fw-bold);
}

header > p {
    font-size: var(--fs-500);
}

.layout-grid{
    --gap: 2rem;
    display: grid;
    gap: var(--gap);

}

@media (min-width: 800px){
    .layout-grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.layout-grid > * {
    flex: 1;
}


.col{
    display: grid;
    align-content: center;
    gap: var(--gap);


}

.card{
    padding: 32px;
    border-top: 5px solid;
    border-radius: 5px;
    box-shadow: 3px 16px 24px -8px rgb(0 0 150/ 0.15);

    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.5 ;


}

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

.card-img{
    display: block;
    margin-top: 40px;
    margin-left: auto;
}

.card-1{
    border-color: var(--clr-teal)
}

.card-2{
    border-color: var(--clr-red)
}

.card-3{
    border-color: var(--clr-yellow)
}

.card-4{
    border-color: var(--clr-blue)
}

.card:hover{
    transform: translateY(-20px);
    background-color: #f7f7f7;
}


footer{
    text-align: center;
    margin-top: 150px;



}