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

:root {
    --xlrg-font: 6rem;
    --lrg-font: 3rem;
    --med-font: 1.50rem;
    --small-font: 1.35rem;
    --xsmall-font: 14px;
    --yellow-color: 52;
    --sky-blue-color: 116;
    --pink-color: 300;
}


    h2 {
        font-size: var(---lrg-font);
    }

    /* .header-section div {
        width: 50vw;
    } */

a {
    text-decoration: none;
}

.card-yellow {
    --hue:var(--yellow-color);
}

.card-blue {
    --hue:var(--sky-blue-color);
}

.card-pink {
    --hue: var(--pink-color)
}

.card {
    position: relative;
    padding-block: 5rem;
}

.card-bkgd,
.card-blur {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
}

.card--bkgd {
    object-fit: cover;
    object-position: center;
}

.card-blur {
    backdrop-filter: blur(24px);
}

.card-container {
    position: relative;
    display: grid;
    grid-template-columns: 250px;
    justify-content: center;
    gap: 2rem;
}

/* .container-2 {
    max-width: 1120px;
    margin-inline: 1.5rem;
} */

.card-article {
    position: relative;
    /* border-radius: 2rem; */
    overflow: hidden;
}

.card-img {
    /* border-radius: 2rem; */
    transition: transform .4s;
}

.card-article img {
   max-width: 250px;
}

.card-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 70%, hsla(0, 0%, 0%) 100%);
}

.card-data {
    color: #fff;
    position: absolute;
    left: 1.5rem;
    bottom: 2rem;
}

.card-name {
    font-size: var(--med-font);
    margin-bottom: .25rem;
}

.card-profession {
    display: block;
    font-size: var(--small-font);
}

.card-clip {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: hsl(var(--hue), 90%, 50%);
    box-shadow: 0 0 16px 4px hsl(var(--hue), 90%, 50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--small-font);
    color: #444;
    z-index: 5;
    cursor: pointer;
    transition: transform .4s;
}

.card-article:hover .card-img {
    transform: scale(1.1);
}

/************ CARD INFO ***********/

.info {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, .1);
    backdrop-filter: blur(12px);
    padding: 3rem 1.5rem 1.5rem;
    color: #fff;
    clip-path: circle(8px at 88% 9%);
    transition: clip-path .5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-name {
    font-size: var(--med-font);
    margin-bottom: .5rem;
}

.info-description {
    font-size: var(--xsmall-font);
    text-align: left;
    /* margin-bottom: 1rem;
    margin-top: 2rem; */
}

.info-btn {
    display: inline-flex;
    background-color: hsl(var(--hue), 90%, 50%);
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #444;
    font-size: var(--small-font);
    font-weight: 500;
    transition: box-shadow .4s;
}

.info-btn:hover {
    box-shadow: 0 0 20px hsl(var(--hue), 90%, 50%);
}

.info-social {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    column-gap: .5rem;
}

.info-link {
    background-color: hsl(var(--hue), 90%, 50%);
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    width: 2rem;
    height: 2rem;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    font-size: var(--small-font);
    color: #444;
    transition: transform .4s;
}

.info-link:hover {
    transform: translateY(-.25rem);
}

/* ROTATE ICON */

.card-article:hover .card-clip {
    transform: rotate(-45deg)
}

/* CLIP PATE ANIMATION */

.info:hover,
.card-clip:hover ~ .info {
    clip-path: circle(100%);
}

.paralax-text {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: #fff;
    z-index:3;
    width: 700px;
    padding: 10px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 3px;
}

.paralax-text h2 {
    font-size: var(--lrg-font);
}

.paralax-text p {
    font-size: var(--small-font);
}




/* MEDIA QUERIES */

@media screen and (max-width: 320px){
    .container-2 {
        margin-inline: 1rem;
    }

    .card-contaier {
        grid-template-columns: 1fr;
    }

    .card-article img {
   max-width: 310px;
}

    .info {
        padding: 1.5rem 1rem;
    }

}

@media screen and (max-width: 450px) {
        .paralax-text p {
        display: none;
    }

    /* .card-container {
        grid-template-columns: 100vw;
    }

    .card-article img {
        max-width: 100vw;
    } */
}

@media screen and (max-width:555px) {
.card-container {
    grid-template-columns: 100vw;
    }

    .card-article img {
    max-width: 100vw;
    }

    .center-txt-small-screens {
        text-align: center;
    }

    .stars {
        display: none;
    }

}

@media screen and (min-width: 555px){
    .card-container {
        grid-template-columns: repeat(2, 260px);
    }

    .info {
        padding: 2rem .5rem 1rem;
    }

    .paralax-text h2, p {
        text-align:center;
    }
        h2 {
        font-size: 2rem;
    }

}

@media screen and (max-width: 1140px){
    /* .header-section {
        margin-bottom: 70px;
    } */

    .header-section div {
        /* width: 100vw; */
        margin-top: 50px;
    }
    .header-bkgd-img {
        display:none;
    }

    .paralax-text {
        width: 75vw;
        padding: 10px;
    }
}

@media screen and (min-width: 1150px){
    .card {
        height: 100vh;
        display: grid;
        place-content: center;
    }
    .card-container {
        grid-template-columns: repeat(4, 250px);
    }

    .card-article img {
   max-width: 240px;
    }

    /* .card-article,
    .card-img {
        border-radius: 3rem;
    } */

    .card-data {
        left: 2rem;
        bottom: 3rem;
    }

    .card-profession {
        font-size: var(--small-font);
    }

    .card-clip {
        top: 1.5rem;
        right: 1.5rem;
    }

    .info {
        padding: 4rem 1rem 2.5rem;
    }

    .info-description,
    .info-btn {
        font-size: var(--small-font);
    }

    .info-description {
        margin-bottom: 1.5rem;
    }

    .info-social {
        left: 2rem;
        bottom: 2.5rem;
        column-gap: .75rem;
    }
}