@import "styles/_mixins.scss";

.career {
    margin: 24px auto;
    border-radius: 16px;
    position: relative;
    background-image: var(--Purple-gradient);
    background-position: center, center;
    background-size: contain, contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 64px 16px;
    &__bg {
        position: absolute;
        top: 35%;
        left: 0;
        transform: scale(1.05);
    }
    .label {
        z-index: 1;
        position: relative;
    }
    .h2 {
        color: var(--White);
        text-align: center;
        max-width: 1000px;
        margin: 24px 0;
        z-index: 1;
        position: relative;
    }
    .body2 {
        max-width: 440px;
        text-align: center;
        margin-bottom: 40px;
        color: var(--White);
        opacity: 0.8;
        z-index: 1;
        position: relative;
    }
    &__button {
        z-index: 1;
        position: relative;
    }
    &::before {
        content: url("data:image/svg+xml,%3Csvg width='296' height='72' viewBox='0 0 296 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M16 0C7.16345 0 0 7.16345 0 16V72C0 63.1635 7.16345 56 16 56H264C272.837 56 280 48.8366 280 40V16C280 7.16344 287.163 0 296 0H16Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
        position: absolute;
        top: -1px;
        left: -1px;
        height: 72px;
    }
    &::after {
        content: url("data:image/svg+xml,%3Csvg width='256' height='107' viewBox='0 0 256 107' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M0 107H240C248.837 107 256 99.8365 256 91V0C256 8.83656 248.837 16 240 16H32C23.1635 16 16 23.1634 16 32V91C16 99.8365 8.83655 107 0 107Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
        position: absolute;
        bottom: -1px;
        right: -1px;
        height: 107px;
    }

    @include w(1392) {
        margin: 24px 16px;
    }
    @include w($md) {
        &::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='58' viewBox='0 0 96 58' fill='none'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M8 0C3.58172 0 0 3.58179 0 8V58C0 53.5818 3.58172 50 8 50H80C84.4183 50 88 46.4182 88 42V8C88 3.58179 91.5817 0 96 0H8Z' fill='white'/%3E%3C/svg%3E");
            height: 58px;
        }
        &::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='50' viewBox='0 0 69 50' fill='none'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M0 50H61C65.4183 50 69 46.4182 69 42V0C69 4.41821 65.4183 8 61 8H16C11.5817 8 8 11.5818 8 16V42C8 46.4182 4.41827 50 0 50Z' fill='white'/%3E%3C/svg%3E");
            height: 50px;
        }
    }
}

• [F] index.jsx
  Delete
• [F] style.scss
  Delete