@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

:root {

    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);

    --grey500: hsl(234, 12%, 34%);
    --grey400: hsl(212, 6%, 44%);
    --white: hsl(0, 0%, 100%);

}

body {
    font-family: "Poppins", sans-serif;
    font-size: .938rem;
    color: var(--grey500);
}

.container {
    background-color: var(--white);
    width: inherit;
}

.content {
    margin-inline: 2.4rem;
    text-align: center;
}

.content>h1 {
    font-weight: 200;
    margin-block: .5rem;
}

.content h1>strong {
    font-weight: 600;
}

.content h1,
.content h1>strong {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.content>p {
    font-size: .938rem;
    margin-block-end: 3rem;
}

.cards .card {
    margin-block-end: 2rem;
    border-radius: .5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0rem 0rem 1rem -.6rem var(--grey400),
                0rem .5rem 1rem -.9rem var(--blue);
}

.cards .card img {
    align-self: flex-end;
    margin-block: 2.5rem;
}

.cards .card > * {
    margin-inline: 2rem;
    margin-block: .3rem;
}

.cards .card1::before {
    content: "";
    background-color: var(--cyan);
    height: .25rem;
}

.cards .card2::before {
    content: "";
    background-color: var(--red);
    height: .25rem;
}

.cards .card3::before {
    content: "";
    background-color: var(--orange);
    height: .25rem;
}

.cards .card4::before {
    content: "";
    background-color: var(--blue);
    height: .25rem;
}

.cards .card > h2 {
    margin-block-start: 1.5rem;
    font-size: 1.25rem;
}

.cards .card > p {
    font-size: .85rem;
}

footer {
    font-size: .8rem;
    text-align: center;
    margin-block-start: 2rem;
}

footer a {
    color: var(--blue);
}