:root {
    --Gray-6: F2F2F2;
    --Grays-Gray-6: F2F2F7;
}

.introduction-block {
    display: flex;
    height: 15rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    align-self: stretch;
}

.introduction-block-welcome {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.875vw;
    width: 47rem;
}

.introduction-block-welcome-main-text {
    color: #000;
    text-align: center;
    font-family: "Happy Monkey", system-ui;
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.introduction-block-welcome-slogan {
    color: #000;
    text-align: center;
    font-family: Caveat;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.introduction-block-welcome-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
}

.video-part {
    display: flex;
    height: 18rem;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
    align-self: stretch;
}

.video-information-frame {
    display: flex;
    padding: 0.875rem 0.25rem 0;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    flex: 1 0 0;
    align-self: stretch;
}

.video-information-name {
    color: #000;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.video-frame {
    flex: 1 0 0;
    align-self: stretch;

    border-radius: 10px;
    border: 1px solid var(--Gray-6, #F2F2F2);
    background: #F4F4F4;

    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.information-frame {
    display: flex;
    padding: 3.75rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;

    border-radius: 0.625rem;
    border: 1px solid var(--Grays-Gray-6, #F2F2F7);
    background: #FFF;
    box-shadow: var(--shadow-objects), 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
}

.information-frame-header {
    color: #000;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    align-self: stretch;
}

.information-frame-text {
    color: #000;
    font-family: var(--font-primary);
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    align-self: stretch;
}

.frame-addition {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
    padding-left: 0.625rem;
}