.IntroContent { margin-top: 6dvw; }
.IntroContent .top {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    align-items: center;
}
.IntroContent .top::before {
    content: "";
    position: absolute;
    border: 1px solid #08424A;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.IntroContent .category {
    color: #FF3300;
    border: 1px solid;
    padding: 5px 10px;
    background-color: #fffff9;
    text-transform: uppercase;
}
.IntroContent .category::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #FF3300;
    display: inline-block;
    margin-right: 10px;
}
.IntroContent .other .time::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #451B17;
    display: inline-block;
    margin-right: 10px;
}
.IntroContent .other .time {
    font-family: 'Manrope';
    font-size: 14px;
    font-weight: 400;
    color: #451B17;
    background-color: #F3F3EC;
    border: 1px solid #451B17;
    padding: 10px 15px;
}
.IntroContent .country {
    color: #F30;
    font-family: 'Manrope';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 3px;
    margin-top: 50px;
}
.IntroContent .singleIntro {
    margin-top: 30px;
    margin-bottom: 80px;
    transition: all 1s linear;
}
.IntroContent .title * {
    font-family: 'Manrope';
    font-size: 45px;
    font-weight: 400;
    line-height: 50px;
    color: #451B17;
    transition: all 1s linear;
}
.IntroContent .image { position: relative; margin-bottom: 70px; transition: all 1s linear; }
.IntroContent .image img {
    width: 100%;
    height: 385px;
    object-fit: cover;
    object-position: center;
    transition: all 1s linear;
}
.IntroContent .image .foot { position: absolute; right: 15px; bottom: 15px; color: #fffff9; }

.IntroContent .other.event { display: flex; gap: 5px; }
.IntroContent .localization a, .IntroContent .participation a {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
    background-color: #F3F3EC;
    border: 1px solid #451B17;
    padding: 10px;
    font-size: 16px;
    color: #FF3300;
    font-weight: 700;
}
.IntroContent .localization a img, .IntroContent .participation a img { max-width: 20px; }
.IntroContent .localization a span, .IntroContent .participation a span { font-weight: 400; color: #451B17 }
.IntroContent .singleIntro { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; margin-bottom: 80px; }
.IntroContent .singleIntro .date > * {
    font-family: 'PT Serif';
    font-size: 42px;
    font-style: italic;
    font-weight: 400;
    line-height: 37px;
    letter-spacing: -0.5px;
    color: #FF3300;
    transition: all 1s linear;
}

/* ON SCROLL */
.IntroContent.scrolling {
    position: fixed;
    width: 100%;
    margin: 0;
    top: 90px;
    padding-top: 50px;
    z-index: 3;
    background-color: #fffff9;
    transition: all .1s linear
}
.IntroContent.scrolling.upper { top: 50px; transition: all .1s linear }
.IntroContent.scrolling .image { margin-bottom: 0; transition: all 1s linear; }
.IntroContent.scrolling .title *, .IntroContent.scrolling .date *  { font-size: 20px; line-height: 22px; transition: all 1s linear; }
.IntroContent.scrolling .image img { height: 88px; transition: all 1s linear; }
.IntroContent.scrolling .singleIntro { margin-top: 20px; margin-bottom: 20px; transition: all 1s linear; }
.IntroContent.scrolling .imageContainer { max-width: 100%; transition: all 1s linear; }
.IntroContent.scrolling .image .foot { display: none; }

@media screen and (max-width: 767px) {
    .IntroContent { margin-top: 23dvw; }
    .IntroContent .topSection { padding: 0; }
    .IntroContent .category {
        font-size: 14px;
        padding: 5px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    .IntroContent .other .time { padding: 5px; }
    .IntroContent .title { margin-top: 30px; margin-bottom: 30px; }
    .IntroContent .title * { font-size: 32px; line-height: 35px; }
    .IntroContent .image img { height: 177px; }
    .IntroContent .image { margin-bottom: 30px; }
    .IntroContent.scrolling { box-shadow: 0 -6px 27px 0 #00000026; padding-top: 20px; }
    .IntroContent .singleIntro { flex-direction: column; }
    .IntroContent .top.event { flex-direction: column;align-items: flex-start; gap: 5px; }
    .IntroContent .top.event::before { display: none; }
    .IntroContent .other.event { flex-direction: column; }
    .IntroContent .date {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 10px;
        margin-bottom: 30px;
    }
    .IntroContent.scrolling .date { display: none; }
    .IntroContent .singleIntro .date > * { font-size: 32px; line-height: 37px; }
    .IntroContent .singleIntro { margin-top: 20px; margin-bottom: 0; }
    .IntroContent.scrolling .imageContainer { display: none; }
    .IntroContent.scrolling .title { margin-top: 0; margin-bottom: 0; }
}