.block-hero {
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.block-hero>div {
    display: flex;
    align-items: center;
    position: relative;
}

.block-hero--overlay-darken {
    background-color: rgba(0,30,40,0.6);
}

.block-hero_dot-bar {
    position: absolute;
    opacity: 0.5;
    top: -40px;
    right: 100px;
    width: 140px;
}

.wp-admin .block-hero_dot-bar {
    display: none;
}

.block-hero__container {
    padding: 90px 20px 120px;
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: grid;
    grid-template-columns: 40% calc( 60% - 40px);
    grid-gap: 40px;
    color: var( --color-body );    
}
.block-hero--overlay-darken,
.block-hero--overlay-darken h1,
.block-hero--overlay-darken h3,
.block-hero--overlay-darken p {
    color: var( --color-white );    
}
.block-hero__buttons {
    display: flex;
}

.block-hero__buttons a {
    display: block;
    margin-right: 12px;
    box-shadow: var( --box-shadow );
    margin-bottom: 4px;
}

.block-hero__buttons a:nth-of-type(even) {
    background-color: var( --color-brand-yellow );
    border: 2px solid var( --color-brand-yellow );
    color: var(--color-white);
}

.block-hero--align-center {
    text-align: center;
}

.block-hero--align-center .block-hero__container {
    grid-template-columns: 1fr;
}

.block-hero--align-center .block-hero__buttons {
    justify-content: center;
}

.block-hero--align-right {
    text-align: right;
}

@media ( max-width: 960px )  {
    .block-hero__container {
        grid-template-columns: 1fr; 
    }
}

@media ( max-width: 720px )  {
    .block-hero__container {
        text-align: center;
        padding: 100px 20px 80px; 
    }
    .block-hero__buttons {
        justify-content: center;
        display: flex;
        flex-direction: column;
    }
    .block-hero_dot-bar {
        display: none;
    }
}