/*
|--------------------------------------------------------------------------
| IMPACT
|--------------------------------------------------------------------------
*/

.ocean-detail-impact{
    position: relative;
}

.ocean-detail-impact__grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(14px, 2vw, 16px);
}

.ocean-detail-impact__card{
    padding:
            clamp(20px, 4vw, 36px)
            clamp(16px, 2vw, 20px);

    border-radius: clamp(20px, 2vw, 32px);

    background: var(--color-white-5);
    border: 1px solid var(--color-white-10);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: .35s;
}

.ocean-detail-impact__card:hover{
    transform: translateY(-8px);
    border-color: rgba(255,255,255,.15);
}

.ocean-detail-impact__number{
    display: block;

    margin-bottom: clamp(14px, 2vw, 24px);
    font-size: clamp(20px, 3.6vw, 30px);
    line-height: 1.2;

    font-weight: 400;
    font-style: italic;
    color: var(--color-primary);
}

.ocean-detail-impact__title{
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.2;
    font-weight: 400;
    text-align: center;
}

@media(max-width:768px){

    .ocean-detail-impact__grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:380px){

    .ocean-detail-impact__grid{

        grid-template-columns:1fr;

    }

}