@import url('../vars.css');

.stud-group-banner{
    height: 490px;
    background-image: url('/wp-content/themes/neve/assets/img/stud-group/banner.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 32px 0 32px 64px;
    border-radius: 16px;
    margin-bottom: var(--mb);
}
.stud-group-cont{
    display: flex;
    flex-direction: column;
    width: 650px;
    gap: 16px;
}
.stud-group-logos{
    margin-bottom: 24px;
    display: flex;
    gap: 36px;
    align-items: center;
}
.stud-group-banner-title{
    font-family: var(--desktop-h4-font);
    font-size: var(--desktop-h4-size);
    font-weight: var(--desktop-h4-weight);
    color: #fff;
}
.stud-group-banner-desc{
    font-family: var(--desktop-body-font);
    font-size: var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: #fff;
}
.stud-group-banner-btns{
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.stud-group-banner-border-btn{
    border-radius: 999px;
    padding: 19px 20px;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--desktop-button-font);
    font-size: var(--desktop-button-size);
    font-weight: var(--desktop-button-weight);
    color: #fff;
}
.stud-group-banner-white-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 999px;
    padding: 14px 20px;
    background: #fff;
    font-family: var(--desktop-button-font);
    font-size: var(--desktop-button-size);
    font-weight: var(--desktop-button-weight);
    color: var(--primary-brand-1);
}
.stud-group-banner-border-btn:hover,
.stud-group-banner-border-btn:active,
.stud-group-banner-border-btn:visited{
    color: #fff;
}
.stud-group-banner-white-btn:hover,
.stud-group-banner-white-btn:active,
.stud-group-banner-white-btn:visited{
    color: var(--primary-brand-1);
}

.stud-group-history{
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    overflow-y:hidden;
    margin-bottom: var(--mb);
    position:relative;
    user-select:none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.stud-group-history-slide{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.stud-group-history-slide.dragging {
  cursor: grabbing;
  user-select: none;
}
.stud-group-history-items{
    display: flex;
    align-items: center;
    gap: 48px;
    height: 180px;
}
.stud-group-history-bottom-items{
    margin-left: 232px;
}
.stud-group-history-item{
    width: 415px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stud-group-history-year{
    font-family: var(--desktop-h2-font);
    font-size: var(--desktop-h2-size);
    font-weight: var(--desktop-h2-weight);
    color: var(--primary-brand-1);
    font-variant-numeric: lining-nums;
}
.stud-group-history-desc{
    font-family: var(--desktop-body-font);
    font-size: var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--text);
}
.stud-group-history-line{
    display: flex;
    align-items: center;
}
.stud-group-history-dot{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: var(--gray-300);
}
.stud-group-history-line-item{
    width: 222px;
    background: var(--gray-200);
    height: 1px;
}


.stud-group-comp{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: var(--mb);
}
.stud-group-comp-card{
    box-shadow: var(--drop-shadow-200);
    border-radius: 16px;
    padding: 20px 20px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stud-group-comp-card-avatar{
    border-radius: 50%;
    margin-bottom: 32px;
}
.stud-group-comp-card-name{
    text-align: center;
    font-family: var(--desktop-accent-title-font);
    font-size: var(--desktop-accent-title-size);
    font-weight: var(--desktop-accent-title-weight);
    color: var(--text);
    margin-bottom: 8px;
}
.stud-group-comp-card-post{
    text-align: center;
    font-family: var(--desktop-body-font);
    font-size: var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--secondary-2);
    margin-bottom: 16px;
}
.stud-group-comp-card-citate{
    font-family: var(--desktop-body-font);
    font-size: var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--text);
    text-align: center;
}


.stud-group-gallery{
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: var(--mb);
}
.stud-group-gallery-info{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stud-group-gallery-title{
    font-family: var(--desktop-h5-font);
    font-size: var(--desktop-h5-size);
    font-weight: var(--desktop-h5-weight);
    color: var(--text);
}
.stud-group-gallery-desc{
    font-family: var(--desktop-body-font);
    font-size: var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--text);
}
.stud-group-gallery-images{
    width: 60%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    grid-template-areas: 'img1 img1 img1 img2 img2 img2 img2' 'img3 img3 img3 img3 img4 img4 img4';
}
.stud-group-gallery-img-1{
    grid-area: img1;
}
.stud-group-gallery-img-2{
    grid-area: img2;
}
.stud-group-gallery-img-3{
    grid-area: img3;
}
.stud-group-gallery-img-4{
    grid-area: img4;
}


.stud-group-contact{
    border-radius: 16px;
    height: 440px;
    width: 1285px;
    background-image: url('/wp-content/themes/neve/assets/img/stud-group/контакты.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0 50px 46px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: var(--mb);
}
.stud-group-contact-title{
    font-family: var(--desktop-h2-font);
    font-size: var(--desktop-h2-size);
    font-weight: var(--desktop-h2-weight);
    color: #fff;
}
.stud-group-contact-desc{
    font-family: var(--desktop-body2-font);
    font-size: var(--desktop-body2-size);
    font-weight: var(--desktop-body2-weight);
    color: #fff;
    width: 600px;
}
.stud-group-contact-vk{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--desktop-h5-font);
    font-size: var(--desktop-h5-size);
    font-weight: var(--desktop-h5-weight);
    color: #fff;
}
.stud-group-contact-vk:hover,
.stud-group-contact-vk:active,
.stud-group-contact-vk:visited{
    color: #fff;
}
.stud-group-contact-icon{}

@media screen and (max-width: 1660px) {
    .stud-group-cont{
        background-image: radial-gradient(ellipse, rgba(160, 0, 0, 1) 0%, rgba(41, 53, 86, 0) 72%);
    }
}
@media screen and (max-width: 1440px) {
    .stud-group-contact{
        width: 100%;
    }
}
@media screen and (max-width: 1280px) {
    .stud-group-banner{
        background-image: url('/wp-content/themes/neve/assets/img/stud-group/banner-adapt.jpg');
        background-color: #a00000;
        background-position: right bottom;
        background-size: cover;
        height: 824px;
    }
    .stud-group-contact{
        background-image: url('/wp-content/themes/neve/assets/img/stud-group/contact-adapt.png');
        background-color: #a00000;
        background-position: right bottom;
        background-size: cover;
        height: 824px;
    }
    .stud-group-banner-btns{
        flex-direction: column;
        align-items: flex-start;
    }
    .stud-group-comp{
        grid-template-columns: 1fr 1fr;
    }
    .stud-group-gallery{
        flex-direction: column;
    }
    .stud-group-gallery-images{
        width: 100%;
        height: 520px;
    }
    .stud-group-gallery-img-1,
    .stud-group-gallery-img-2,
    .stud-group-gallery-img-3,
    .stud-group-gallery-img-4{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }
    .stud-group-gallery-info{
        width: 100%;
    }
    /* .stud-group-banner{
        background-position: 70% center;
    }
    .stud-group-contact{
        background-position: 40% center;
    } */
}
@media screen and (max-width: 1024px) {
    .stud-group-contact{
        background-size: 100%;
    } 
}
@media screen and (max-width: 768px) {
    .stud-group-history-item{
        width: 240px;
    }
    .stud-group-history-line-item{
        width: 134px;
    }
    .stud-group-history-bottom-items{
        margin-left: 144px;
    }
    .stud-group-cont{
        width: 100%;
        background-image: none;
    }
    
    .stud-group-logo{
        width: 100px;
    }
    .stud-group-logos{
        margin-bottom: 0;
    }
    .stud-group-banner-btns{
        margin-top: 0;
    }
    .stud-group-contact-desc{
        width: 100%;
    }
    .stud-group-comp{
        display: flex;
        overflow-x: scroll;
        padding: 20px 0;
    }
    .stud-group-comp-card{
        flex: 0 0 320px;
    }
    .stud-group-comp-card-avatar{
        height: 160px;
        width: 160px;
    }
    .stud-group-gallery-images{
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .stud-group-banner{
        padding: 32px 20px;
    }
    .stud-group-contact{
        padding: 28px 20px;
        gap: 20px;
        height: 650px;
    }
}
@media screen and (max-width: 480px) {
    .stud-group-contact{
        background-image: url('/wp-content/themes/neve/assets/img/stud-group/contact-mob.png');
        background-position: center bottom;
        background-size: 100%;
        height: 635px;
    }
    .stud-group-contact .stud-group-banner-white-btn{
        width: 100%;
        padding: 8px;
    }
    .stud-group-banner{
        background-image: url('/wp-content/themes/neve/assets/img/stud-group/banner-mob.png');
        background-position: center bottom;
        background-size: 100%;
    }
}