header {
    background-color: var(--violet);
    width: 100vw;
    height: 162px;
    @extend %flex-center-center;
    border-radius: 0px 0px 0px 100px;
    position: relative;
    z-index: 1;
}

header::after {
    content: '';
    width: 100%;
    height: 100%;
    @include absolute-el(0px, unset, unset, 0px);
    background-image: url(/assets/desktop/bg-pattern-header.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 0px 0px 100px;
    z-index: 2;
}

.header-wrap {
    width: 1110px;
    height: 32px;
    @extend %flex-between-center;
    position: relative;
    z-index: 3;
}

.header-img {
    cursor: pointer;
    
}

@media screen and (max-width: 1110px) {
    .header-wrap {
        width: 689px;
    }
}

@media screen and (max-width: 768px) {
    header {
        border-radius: 0px 0px 0px 0px;
    }
    .header-wrap {
        width: 80%;
    }
}