@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {
    --DMSans: "DM Sans", sans-serif;
    --Purple100: hsl(254, 88%, 90%);
    --Purple500: hsl(256, 67%, 59%);
    --Yellow100: hsl(31, 66%, 93%);
    --Yellow500: hsl(39, 100%, 71%);
    --White: hsl(0, 0%, 100%);
    --Black: hsl(0, 0%, 7%);
}

img {
    max-width: 100%;
    display: block;
}

body{
    background-color: #f2f2f2;
    font-family: var(--DMSans);
    display: grid;
    justify-content: center;
    min-height: 100vh;
    line-height: 1;
}

.upper {
    font-size: 2.75rem;
    font-weight: 500;
}

.per {
    font-size: 4rem;
    font-weight: 500;
}

.mid {
    font-size:2.25rem;
    font-weight: 500;
}

.down {
    font-size: 1.5rem;
    font-weight: 400;
}

.container {
    max-width: 1400px;
    margin: 1rem;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 75px;
    gap: 2rem;
    grid-template-areas: 
    "card1 card2 card2 card3"
    "card1 card2 card2 card3"
    "card1 card2 card2 card3"
    "card1 card2 card2 card3"
    "card1 card5 card6 card3"
    "card4 card5 card6 card3"
    "card4 card5 card6 card3"
    "card4 card7 card8 card8"
    "card4 card7 card8 card8"
    "card4 card7 card8 card8";
}

.container .card {
    overflow: hidden;
    border-radius:0.5rem;
}


.container .card:nth-child(1) {
    background-color: var(--Yellow100);
    position: relative;
}


.container .card:nth-child(2),
.container .card:nth-child(8) {
    background-color: var(--Purple500);
    color: var(--White);
}

.container .card:nth-child(3) {
    background-color: var(--Purple100);
}

.container .card:nth-child(4),
.container .card:nth-child(6) {
    background-color: var(--Yellow500);
}

.container .card:nth-child(5),
.container .card:nth-child(7) {
    background-color: var(--White);
}

.container .card:nth-child(1) {
    grid-area: card1;
    /* display: flex;
    flex-direction: column; */
    padding: 6rem 2rem 0 2.5rem;
    
}

.container .card:nth-child(1) em {
    color: var(--Purple500);
}

.container .card:nth-child(1) img {
    margin-top: 1rem;
}

.container .card:nth-child(2) {
    grid-area: card2;
    display: flex;
    flex-direction: column;
    padding:2rem;
    text-align: center;
    font-weight: 500;
    align-items: center;
    justify-content: center;
}

.container .card:nth-child(2) .diff {
    color: var(--Yellow500);
}

.container .card:nth-child(2) img{
    width: 250px;
    margin: 1rem 0.5rem;
}

.container .card:nth-child(3) {
    grid-area: card3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2.75rem 2rem 2.5rem 2rem;
    position: relative;
}

.container .card:nth-child(3) img {
    position: absolute;
    height:410px;
    object-fit: cover;
    object-position: left;
    top:150px;
}

.container .card:nth-child(4) {
    grid-area: card4;
    padding: 1.75rem 2.25rem;
}

.container .card:nth-child(4) p {
    margin-bottom: 2rem;
}

.container .card:nth-child(5) {
    grid-area: card5;
    padding: 1rem 2rem 1rem 2rem;
    position: relative;
}

.container .card:nth-child(5) p {
    margin-top: 6rem;
}

.container .card:nth-child(5) img {
    position: absolute; 
}

.container .card:nth-child(6) {
    grid-area: card6;
    padding: 1rem 2rem 1rem 2rem;
    position: relative;
}

.container .card:nth-child(6) p {
    margin-bottom: 1rem;
}

.container .card:nth-child(7) {
    grid-area: card7;
    padding: 1.5rem;
}


.container .card:nth-child(7) span {
    display:block;
    margin-bottom: 1rem;
}

.container .card:nth-child(7) img {
   margin-top:1.5rem;
}

.container .card:nth-child(8) {
    grid-area: card8;
    padding:2rem;
    display: grid;
    grid-template-columns: 1.75fr 2fr;
    align-items: center;
    gap:1rem;
}

.attribution {
    background-color: var(--Purple100);
    padding:1rem;
    display: flex;
    justify-content: center;
}

a {
    text-decoration:none;
    margin-left: 0.25rem;

}

a:hover {
    color: var(--White);
}


/* media query for tablet ( 1024px) */
@media (max-width:1024px) {

   .container {
    grid-auto-rows: initial;
    grid-template-areas:
    "card1 card1 card2 card2"
    "card1 card1 card2 card2"
    "card3 card3 card4 card4"
    "card3 card3 card4 card4"
    "card5 card5 card6 card6"
    "card5 card5 card6 card6"
    "card7 card7 card8 card8"
    "card7 card7 card8 card8";
   }

    .container .card:nth-child(8) {
        grid-template-columns: 1fr;
    } 
}


/* media query for mobile (smaller than 768px) */
@media (max-width: 768px) {
    .container .card {
        text-align: center;
    }

    .container {
        grid-template-areas:
        "card2"
        "card5"
        "card6"
        "card3"
        "card8"
        "card7"
        "card1"
        "card4";
    }

    .container .card:nth-child(4),
    .container .card:nth-child(5),
    .container .card:nth-child(6),
    .container .card:nth-child(7)  {
        text-align: left;
    
    }

    .container .card:nth-child(1) {
        padding: 2rem;
        text-align: left;
    }

    .container .card:nth-child(1) .upper {
        font-size: 2.5rem;
    }

    .container .card:nth-child(1) img {
        width: 250px;
    }

    .container .card:nth-child(3) {
        padding: 2.5rem 1rem 2.5rem 1rem; 
    }

     .container .card:nth-child(3) .upper {
        font-size: 2.25rem;
    }

    .container .card:nth-child(3) img {
        margin: 1rem 0;
        position: initial;
        height: initial;
    }

    .container .card:nth-child(5) p {
        margin: 10rem;
    }

    .container .card:nth-child(8) {
        padding: 1.5rem 4rem;
    }
}

.attribution {
    font-size: 0.95rem;
}


/* media query for mobile (smaller than 540px) */
@media (max-width: 540px) {
    .container .card:nth-child(5) p {
        margin: 6rem;
    }
}