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

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

:root {
    /* colors */
    --red: #ea5353;
    --cyan: #45d3d3;
    --orange: #fcaf4a;
    --blue: #549ef2;  
    --grey-dark: hwb(234 30% 62%);
    --grey-light: hwb(210 41% 53%);
    --white: #ffffff;
    --background: #FAFAFA;

    /* typography */
    --font-family: "Poppins", sans-serif;
    --lh: 140%;
    --fw-200: 200;
    --fw-400: 400;
    --fw-600: 600;
}

/* ---> General Styles <--- */
body{
    font-family: var(--font-family);
    line-height: var(--lh);
    background: var(--background);
    color: var(--grey-dark);   
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.25rem;
}


img{
    width: 100%;
    max-width: 4rem;
}

h1,
h2{
    font-size: 1.5rem;
}

h1 {
    font-weight: var(--fw-200);
    margin-bottom: 0.75rem;
}

h2 {
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.125rem;
    font-weight: var(--fw-600);
    margin-bottom: 0.5rem;
}

p{
    font-size: 0.9375rem;
}

/* tablet */
@media (min-width: 768px) {
    body{
        padding: 4rem;
    }

    h1,
    h2{
        font-size: 2.5rem;
    }

    h1 {
        margin-bottom: 1.25rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* ---> Card Feature <--- */
.container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.headings {
    margin: 0 auto;
    text-align: center;
    max-width: 20rem;
}

.cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 15px 30px -11px rgba(129, 162, 213, 0.5);
}

.card-p {
    font-size: .875rem;
    color: var(--grey-light);
}

.card-img {
    margin-top: 2rem;
    align-self: flex-end;
}

.card1 {
    border-top: 4px solid var(--cyan);
}

.card2 {
    border-top: 4px solid var(--red);
}

.card3 {
    border-top: 4px solid var(--orange);
}

.card4 {
    border-top: 4px solid var(--blue);
}

/* tablet */
@media (min-width: 768px) {
    .headings {
        max-width: 31.25rem;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 70.625rem;
    }
}

/* desktop */
@media (min-width: 1025px) {
    .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .card1 {
        grid-row: 1 / 3;
        align-self: center;
    }
    
    .card2 {
        grid-column: 2;
    }
    
    .card3 {
        grid-column: 2;
    }
    
    .card4 {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

.attribution {
    text-align: center;
    font-size: .875rem ;
    padding: 1.125rem;
}