/* header css file */
/* General header rules  */
header{
    position: relative;
    padding: var(--padding);
}
header .header-surround{
    position: relative;
}
header .header-image{
    border-radius: var(--radius);
}
header.header-surround .header-items{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: var(--padding);
}
/* Text over asset header  */
header.text-over-asset .header-surround .header-items{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    padding: var(--padding);
}
header.text-over-asset .header-surround .header-items .link-area{
    margin-bottom:var(--gap);
}
/* Split view header  */
header.split-view .header-surround{
    display: grid;
}
header.split-view .header-surround .header-asset{
    height: 50vh;
    /* background-image: var(--header-bg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* Navigational header  */
header.navigational .header-surround .header-text-over-asset{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}
header.navigational .header-surround .header-text-over-asset .header-items {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
header.navigational .header-surround .header-text-over-asset .link-area{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}
header.navigational .header-surround .header-text-over-asset .link-area .link-area-item{
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    padding: var(--padding);
}
@media (min-width:992px){
    header.split-view .header-surround{
        grid-template-columns:repeat(2, 1fr);
    }
    header.text-over-asset .header-surround .header-items{
        max-width: 600px;
    }
    header.navigational .header-surround .header-text-over-asset{
        display: grid;
        grid-template-columns: 3fr 1fr;
    }
    header.navigational .header-surround .header-text-over-asset .link-area{
        grid-template-columns: 1fr;
    }
}