@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed: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&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');


*, *::before, *::after{
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,figure{
    margin: 0;
    padding: 0;
}
html{
    display: flex;
    justify-content: center;
}

body{
    width: 100%;
    font-family: "Barlow Semi Condensed", serif;
    background-color: #F5F5F5;
    color: white;
}
section>h2{
    font-size: 1.2rem;
    font-weight: 500;
}
section>p{
    font-size: .9rem;
}
img{
    max-width: 100%;
}
/*Header*/
header{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.landing{
    width: 200px;
}

.quotation{
    display: none;
}

/*Color Classes*/
.purple{
    background-color: #733EC8;
}
.white{
    background-color: hsl(0, 0%, 100%);
}
.black{
    background-color: hsl(0, 0%, 7%);
}
.gray{
    background-color: hsl(217, 19%, 35%);
}
.gray-gradient{
    background: rgb(22,36,0);
    background: linear-gradient(90deg, rgba(22,36,0,0.929030987394958) 0%, rgba(72,85,106,1) 50%, rgb(55, 182, 214) 100%);
}
.dark-blue{
    background-color: hsl(219, 29%, 14%);
}
.gray-font{
    color: hsl(217, 19%, 35%);
}

main{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 30px;
    max-width: 1440px;
}

.card{
    padding: 30px;
    border-radius: 8px;
    box-shadow: 3px 3px 35px gray;
    grid-column: span 4;
    transition: 2s ease;
    transition-property: transform, opacity;
}

.card > *{
    margin-bottom: 20px;
}

figure{
    display: flex;
}
figure > img{
    border-radius: 50%;
    border: 1px solid hsl(0, 0%, 81%);
}
figure > figcaption{
    margin-left: 20px;
    align-self: center;
    font-weight: 500;
}
.card>p{
    color: hsl(0, 0%, 81%);
}
figcaption > p:last-child{
    color: hsl(0, 0%, 81%);
    font-size: .8rem;
    font-weight: 300;
}
.card:nth-child(3) p,.card:nth-child(5) p{
    color: hsl(217, 19%, 35%);
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

footer{
    margin: 20px;
}

/*Tablet*/
@media screen and (min-width: 768px) {
    /* section{
        grid-column: span 2;
    }
    .card:first-child{
        grid-column: span 4;
    }
    .card:last-child{
        grid-column: span 4;
    }
    .card:nth-child(4){
        grid-column: span 4;
    } */
    .card:nth-child(2),.card:nth-child(3){
        grid-column: span 2;
    }
}

/*Laptop*/
@media screen and (min-width: 1025px) {
    body{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    main{
        width: 90%;
        margin: 30px;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
    }
    .card{
        position: relative;
    }
    .quotation{
        display:block;
        position: absolute;
        top: 1px;
        right: 60px;
        height: 130px;
    }
    section > h2{
        position: relative;
    }
    section{
        grid-column: span 1;
    }
    .card:first-child{
        grid-column: 1/3;
    }
    .card:last-child{
        grid-column: 4/5;
        grid-row: span 2;
    }
    .card:nth-child(2){
        grid-column: 3/4;
    }
    .card:nth-child(3){
        grid-column: span 1;
    }
    .card:nth-child(4){
        grid-column: span 2;
    }
}
/*Scroll Reveal*/
.reveal{
    transform: translateY(150px);
    opacity: 0;
}

.active{
    transform: translateY(0px);
    opacity: 1;
}