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

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

:root {
    --VeryDarkBlue: hsl(233, 47%, 7%);
    --DarkDesaturatedBlue: hsl(244, 38%, 16%);
    --SoftViolet: hsl(277, 64%, 61%);
    --White: hsl(0, 0%, 100%);
    --SlightlyTransparentWhite1: hsla(0, 0%, 100%, 0.75);
    --SlightlyTransparentWhite2: hsla(0, 0%, 100%, 0.6);
}

html {position: relative;}
.attribution { 
    font-size: 12px; 
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width:80vw;
    font-family: "Roboto", sans-serif;
}
.attribution:hover {
    font-size: 16px;
    transition: 0.5s;
}
.attribution a { 
    text-decoration: none;
    color: white; 
}

body {
    font-size: 15px;
    font-family: "Inter", serif;
    background-color: var(--VeryDarkBlue);
    color: var(--SlightlyTransparentWhite1);
}

.main {
    width: 325px;
    height: 780px;
    margin: 88px auto;
    display: flex;
    flex-direction: column;
    background-color: var(--DarkDesaturatedBlue);
    text-align: center;
    border-radius: 10px;
}

.imgHeadMob,.overlay {
    border-radius: 10px 10px 0 0;
}

.imgHeadMob {
    background-image: url('images/image-header-mobile.jpg');
    background-size:contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 240px;
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(277, 99%, 36%, 0.45);
}

.imgHeadDesk {
    display: none;
}

.container, .info,.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    padding: 40px 32px;
    gap:20px
}

#insights {
    color: var(--SoftViolet);
}

.description {
    line-height: 1.75;
}

.info {
    display: flex;
    gap:25px;
    padding: 20px;
}

.heading, .num {
    font-family: "Lexend Deca", serif;
    color: var(--White);
    font-weight: 700;
}

.heading { font-size: 28px;}

.category {
    gap: 5px;
}

.num { font-size: 20px;}

.name { 
    text-transform: uppercase;
    color: var(--SlightlyTransparentWhite2);
    font-size: 12px;
}


@media (min-width:1150px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .main {
        margin: 0;
        width: 1110px;
        height: 450px;
        flex-direction: row-reverse;
        text-align: start;
    }
    .imgHeadMob {
        display: none;
    }
    .imgHeadDesk {
        display: block;
        background-image: url('images/image-header-desktop.jpg');
        background-size:cover;
        background-repeat: no-repeat;
        width: 50%;
        height: 100%;
        position: relative;
    }
    .imgHeadDesk,.overlay {
        border-radius: 0 10px 10px 0;
    }
    .container {
        width: 50%;
        height: 100%;
        padding: 70px;
    }
    .description {
        padding-right: 60px;
    }
    .info {
        width: 100%;
        flex-direction: row;
        justify-content: start;
        padding: 0;
        gap:50px;
        margin-top: 50px;
    }
    .heading { font-size: 34px;}
    
}