@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --Very-Dark-Grayish-Blue: hsl(217, 19%, 35%);
    --Desaturated-Dark-Blue: hsl(214, 17%, 51%);
    --Grayish-Blue: hsl(212, 23%, 69%);
    --Light-Grayish-Blue: hsl(210, 46%, 95%);
    /* Weights: 500, 700 */
}
body {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    background: var(--Light-Grayish-Blue);
    color: var(--Very-Dark-Grayish-Blue);
}
.main {
    height: 100vh;
    display: grid;
    place-content: center;
}
.card {
    margin: 1em;
    width: 25.384em ;
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 3em 4em -3em var(--Grayish-Blue); 
    position: relative; /** for div.modal */
    
    .container-image {    
        overflow: hidden;
        border-radius: 1em 1em 0 0;

        img {
            width: 100%;
            aspect-ratio: 12 / 8;
            object-fit: cover;
            vertical-align: top;
        }
    }
    
    .container-content {
        padding: 3em;
        padding-bottom: 1.8em;
        display: grid;
        gap: 1em;
        
        .highlight {
            /* font-size: 1.3em; */
            font-size: clamp(1.2em, 0.7em + 1vw, 1.6em);            
            font-weight: 800;
        }
        .general-text {
            line-height: 150%;
            font-weight: 500;
            color: var(--Desaturated-Dark-Blue);
        }
        .footer-card {
            display: flex;
            justify-content: space-between;
            margin-top: 2em;

        }
        .user {
            display: flex;
            align-items: center;
            gap: 1em;
            
            .user__photo {
                height: 3em;
                border-radius: 50%;
            }
            .user__info {
                .name {
                    font-weight: 800;
                }
                .date {
                    color: var(--Grayish-Blue);
                    line-height: 150%;
                }
            }
        }
    }
    .btn-share {
        background: var(--Light-Grayish-Blue);
        width: 3em;
        display: grid;
        place-items: center;
        border-radius: 50%;
        padding: 0.5em;
        
        svg {
            position: relative;
            fill: var(--Desaturated-Dark-Blue);
            left: -0.1em;
        } 
    }
    /** MODAL */
    .modal {
        visibility: hidden;
        background: var(--Very-Dark-Grayish-Blue);
        position: absolute;
        bottom: 0;
        height: 6.6em;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 3em;
        align-items: center;
        border-radius: 0 0 1em 1em;

        
        .column-1 {
            display: flex;
            align-items: center;
            gap: 1em;

            .modal__share {
                letter-spacing: 0.4em;
                text-transform: uppercase;
                color: var(--Grayish-Blue);
            }
        }
        .column-2 .btn-share {
            background: var(--Grayish-Blue);
            svg {
                fill: #fff;
            }
        }
    }
}
.card .active {
    visibility: visible;
}

@media screen and (min-width: 1000px){
    .card {
        display: flex;
        width: 53.84em;

        .container-image {
            flex-basis: 100%;
            border-radius: 1em 0 0 1em;

            img {
                height: 100%;
            }
        }

        .modal {
            width: auto;
            height: auto;
            padding: 1.4em 3em;
            border-radius: 1em;
            bottom: 8em;
            right: -4.6em; 
            box-shadow: 0 1em 4em -10px var(--Grayish-Blue);
            
            .column-2 .btn-share {
                display: none;
            }

            &::before {
                content: '';
                width: 2em;
                height: 2em;
                background: var(--Very-Dark-Grayish-Blue);
                position: absolute;
                rotate: 45deg;
                bottom: -0.7em;
                right: calc(50% - 1.2em);
            }
        }
    }
}