@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

html {
    font-family: Barlow, sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;

}

main {
    width: 100%;
    height: 100%;
    background: hsl(260, 100%, 95%);
    display: grid;
    grid-template-columns: repeat(4, 0.25fr);
    grid-template-rows: 0.5fr 0.5fr;

    gap: .625rem;
    /* padding: 1rem; */
}


section {
    border-radius: .375rem;
    padding: 1.25rem;

}

img {
    border-radius: 2.5rem;
    border: 3px solid hsl(264, 82%, 80%);

}

h4 {
    width: 9.375rem;
    margin-top: -3.4375rem;
    margin-left: 6rem;
    font-size: 1rem;


}

strong {
    font-size: 1.3125rem;


}

p {
    font-size: .9187rem;
    margin-top: 2.1875rem;

}


section:nth-child(1) {
    grid-area: 1 / 1 / 1 /3;

    background-color: rebeccapurple;




    color: hsl(0, 0%, 100%);

}




section:nth-child(2) {
    grid-area: 0 / 1 / 2 /3;

    background: hsl(217, 19%, 35%);



    color: hsl(0, 0%, 100%);


}







section:nth-child(3) {
    grid-area: 2 / 1 / 3/ 2;

    background: hsl(0, 0%, 100%);

    color: hsl(219, 29%, 14%);
}


section:nth-child(4) {
    grid-area: 2 / 2 / 3 / 4;

    background: hsl(0, 0%, 7%);

    color: hsl(0, 0%, 100%);

}




section:nth-child(5) {
    grid-area: 1 / 4 / 3 / 5;

    background-color: hsl(0, 0%, 100%);

    color: hsl(219, 29%, 14%);
}



footer {
    grid-area: footer;
    grid-column: 3;
    grid-row: 4;

}

footer .attribution {
    font-size: .6875rem;
    text-align: center;

}

footer .attribution a {
    color: hsl(228, 45%, 44%);
}

@media (max-width: 890px) {
    main {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;



    }


}