.header__list-item.header__list-item--active a { color: #036efe }

/*** header top line with menu ***/
.header__top-menu {
    background-color: #14324F;
    .header__list {
        justify-content: center
    }
    .header__list-item {
        a {
            padding-block: 4px;
            color: white
        }
        &:hover a {
            color: #0d0d0d;
        }
        &.header__list-item--active a {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
    }
}

@media screen and (width <= 1320px) {
    .header__top-menu {
        display: none
    }
}
@media screen and (width > 1320px) {
    .header__list-item.header__list-item--mobile-only {
        display: none
    }
}

.grid-wrap-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media screen and (min-width: 640px) {
    .grid-wrap-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1100px) {
    .grid-wrap-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.video__item {
    display: grid;
    gap: 10px;

    * {
        pointer-events: none;
    }

    &:hover {
        cursor: pointer;
        figure::before {
            opacity: 1
        }
        .video__item-title {
            color: #036efe
        }
        .video__item-descr {
            color: #0d0d0d
        }
    }

    figure {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        border-radius: 16px;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        overflow: hidden;
        &::before {
            content: url(../img/video.svg);
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-45.5%);
            opacity: 0;
            transition: opacity 300ms linear
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    }
    
    .video__item-title {
        font-weight: 600;
        font-size: 22px;
        line-height: 1.2;
        transition: color 300ms linear
    }
    
    time {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.3;
        color: #63666b
    }
    
    .video__item-descr {
        font-weight: 400;
        font-size: 18px;
        line-height: 1.3;
        color: #63666b;
        transition: color 300ms linear;
    }
}

.news__item {
    position: relative;
    display: grid;
    gap: 10px;
    & > a {
        position: absolute;
        z-index: 1;
        inset: 0
    }

    &:hover {
        cursor: pointer;
        .news__item-title {
            color: #036efe
        }
        .news__item-descr {
            color: #0d0d0d
        }
    }

    figure {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        border-radius: 16px;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        overflow: hidden;
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    }
    
    .news__item-title {
        font-weight: 600;
        font-size: 22px;
        line-height: 1.2;
        transition: color 300ms linear
    }
    
    time {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.3;
        color: #63666b
    }
    
    .news__item-descr {
        font-weight: 400;
        font-size: 18px;
        line-height: 1.3;
        color: #63666b;
        transition: color 300ms linear;
        line-clamp: 4;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        -webkit-box-orient: vertical;  
        overflow: hidden
    }
}

.news__date {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 5%;
    color: #63666b;
    margin-bottom: 8px
}

.news__top {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns:1fr
}

.news__top h1 {
    margin: 20px 0 14px
}

.news__top p {
    font-size: 20px;
    margin-bottom: 25px;
    line-height: 130%
}

.news__top-img {
    margin-bottom: 16px;
    aspect-ratio: 1.5/1
}

@keyframes marquee {
	0% {
		transform: translateX(100vw)
    }
	100% {
		transform: translateX(-100%)
    }
}

.marquee {
	--marquee: 30s;
    background: linear-gradient(90deg, #009891 0, #5f2d8c 26.56%, #ef4b67 50.52%, #fda625 73.96%, #3162be 100%);
	overflow: hidden;
	&:hover {
		.marquee-track {
			animation-play-state: paused
        }
    }
	.marquee-track {
		display: inline-flex;
		/* gap: 100vw; */
		align-items: center;
		white-space: nowrap;
		animation: marquee var(--marquee) linear infinite;
		color: #fff;
		font-size: 24px;
        line-height: 2.5;
		font-weight: 600;
    }
}

.section__bottom {
    border-bottom: 1px solid #eaeaea;
}

.partner__item {
    padding: 32px;
    figure {
        position: relative;
        display: flex;
        width: 100%;
        height: auto;
        margin: 0 0 32px 0;
        img {
            width: 75%;
            height: auto;
            aspect-ratio: 3/2;
            object-fit: scale-down;
            margin: auto
        }
    }
    p {
        text-align: center;
        font-size: clamp(18px,2.5vw,20px)
    }
}

.book {
    .book__title, .book__tag {
        transition: color 300ms linear
    }
    &:hover {
        .book__title {
            color: #036efe
        }
        .book__tag {
            color: #0d0d0d;
            &:hover {
                color: #036efe
            }
        }
    }
}

.article {
    .article__title, .book__tag, .article__descr {
        transition: color 300ms linear
    }
    &:hover {
        .article__title {
            color: #036efe
        }
        .article__descr {
            color: #0d0d0d
        }
        .book__tag {
            color: #0d0d0d;
            &:hover {
                color: #036efe
            }
        }
    }
}

.catalog__empty {
    font-size: 18px;
    color: #63666b;
    padding: 24px 0
}