@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family     : "Poppins", sans-serif;
    font-size       : 15px;
    font-weight     : 400;
    background-color: whitesmoke;
    color           : hsl(234, 12%, 34%);

}

h1 {
    margin     : 0;
    color      : hsl(234, 12%, 34%);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.2rem + 1vw, 6rem);
}

.top-text-container h1:nth-of-type(1) {
    font-weight: 200;
}

.top-text-container>p {
    font-weight: 400;
}

.head-p {
    margin-top    : 1rem;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    text-align    : center;
    font-size: clamp(0.1rem, 0.5rem + 1vw, 1rem);
}

.whole-container,
.top-text-container,
.bottom-card-container,
.card-container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.whole-container {
    gap: 5rem;
    margin        : 0 1rem;
}

.top-text-container {
    margin-top: 1rem;
    max-width: 500px;

}

.bottom-card-container {
    align-items   : center;
    flex-direction: row;
    flex-wrap     : wrap;
    gap           : 1.5rem;
}

.card-container {
    display         : flex;
    flex-direction  : row;
    align-items     : flex-start;
    height          : 270px;
    max-width           : 390px;
    background-color: white;
    border-top      : 4px solid;
    border-radius   : 6px;
    padding         : 2rem;
}

.content-container p {
    color: hsl(212, 6%, 44%);
}

.RY-container {
    display       : flex;
    flex-direction: column;
    gap           : 1.5rem;
}

.C {
    border-color: hsl(180, 62%, 55%);
}

.R {
    border-color: hsl(0, 78%, 62%);
}

.Y {
    border-color: hsl(34, 97%, 64%);
}

.B {
    border-color: hsl(212, 86%, 64%);
}

img {
    margin: auto;
}