@import 'styles/variables';

.intro_container {
    width: 100%;
}

.intro_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    margin-top: 1.5rem;
}

.intro_content_quote {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 2rem;
}

.intro_sign {
    width: 100%;
    margin-bottom: 1.5rem;
}

.intro_sign p:first-child {
    font-family: $font-base;
    font-weight: 400;
    font-size: 32px;
    line-height: 41.6px;
    letter-spacing: 3px;
    text-transform: capitalize;
    color: $color-golden;
}

.intro_sign img {
    width: 250px;
    margin-top: 3rem;
}

.wrapper_img {
    position: relative;
    z-index: 99;
    margin: 0 auto;
}

.wrapper_content {
    justify-content: flex-start;
    margin-bottom: 4rem;
}

.intro_tag {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: $color-golden;
    font-style: italic;
    font-family: $font-base;
}

@media screen and (min-width: 2000px) {
    .intro_sign img {
        width: 370px;
    }
}

@media screen and (max-width: 450px) {
    .intro_sign img {
        width: 80%;
    }
}