* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-family: Plus Jakarta Sans;
}

body {
    width: 100%;
    height: 100dvh;
}

.ctn__wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 6rem 1fr;
    background-color: #171426;

    @media (min-width: 1024px) {
        grid-template-columns: 50% 50%;
        grid-template-rows: 100%;
    }
}

.ctn__text {
    width: 100%;
    display: flex;
    align-items: center;
}

.ctn__text h1 {
    width: 100%;
    font-size: 2.5rem;
    text-align: center;
    color: #fff;

    @media (min-width: 1024px) {
        font-size: 4rem;
    }

    @media (min-width: 1280px) {
        font-size: 5rem;
    }
}

.ctn__text span {
    color: #6f3ef6;
}

.ctn__mockup {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.ctn__mockup--img {
    width: 90%;
    max-width: 31.25rem;
    background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(111, 62, 246, 1) 15%,
    rgba(23, 20, 38, 1) 60%
  );

    @media (min-width: 1280px) {
        max-width: 37.5rem;
    }
}

.ctn__mockup--img img {
    width: 100%;
}