:root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --grey-500: hsl(234, 12%, 34%);
    --grey-400: hsl(212, 6%, 44%);
    --white: hsl(0, 0, 100%);

}

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

h1,
h2 {
    margin: 0;
    line-height: 1.1;
    color: var(--grey-500);
}

body {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    font-family: "Poppins", sans-serif;
    color: var(--grey-400);
    padding-block-end: 5rem;
}

.wrapper {
    padding-inline: 2rem;
    max-width: 1100px;
    margin-inline: auto;
}

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

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

header > p {
    font-size: 1.2rem;
}

h1 {
    font-weight: 200;
    font-size: 1.5rem;
}

h1 span {
    font-weight: 600;
}

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

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

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

}


.card {
    --br: 0.325rem;
    padding: 2rem;
    border-top: var(--br) solid;
    border-radius: var(--br);
    box-shadow: 0 1rem 1.5rem -0.5rem rgb(0 50 100 / 0.15);
}

.card__title {
   font-size: 1.625rem;
}

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

.border-teal {
    border-color: var(--cyan);
}

.border-red {
    border-color: var(--red);
}

.border-orange {
    border-color: var(--orange);
}

.border-blue {
    border-color: var(--blue);
}

@media (max-width: 375px) {
    .layout-grid {
        flex-direction: column;
    }
}