@use "abstracts/mixins.scss" as *;

.page-header{
    // margin-top: calc(var(--spacing)*1);
    // margin-bottom: calc(var(--spacing)*2);

    color: var(--data-color);
    background-color: var(--data-color-light);

    padding: calc(var(--spacing)*3) var(--padding-body);

    .page-header__inner{
        max-width: var(--max-width-container);
        margin-inline: auto;
    }
  


    .page-title{
        font-size: var(--fs-title-page);
        font-family: var(--font-title);
        margin-bottom: calc(var(--spacing)*1);
    }

    .description{
        font-size: var(--fs-medium);
        line-height: 1.2;
         margin: calc(var(--spacing)*1) 0;
        //  max-width: var(--max-width-content);
    }

    .details{
        display: flex;
        gap: calc(var(--padding-inner)*5);
        margin-top: calc(var(--spacing)*3);

    }

    .details__item{

        .nbr{
            font-size: var(--fs-title-page);
            font-family: var(--font-title);
        }

        .text{
            font-size: var(--fs-medium);
            font-weight: bold;
        }

        button{
            margin-top: calc(var(--spacing)*1);
            a{
                color: var(--data-color);
              
            }
        }

    }


    .btn-action{
        // background-color: var(--data-color-light);
        border-color: var(--data-color-medium);
        color: var(--data-color);
        a{ color: var(--data-color); }
        svg{ fill: var(--data-color); }
        &:hover{
            border-color: var(--data-color);
        }
    }
}