#know_total__container {
    display: grid;
    gap: 25px;
    margin-top: -45px;
}

#know_total__container > .head {
    display: grid;
    grid-template-columns: 1fr 390px;
    align-items: center;
    justify-content: space-between;
}

#know_total__container .search__box {
    display: grid;
    grid-template-columns: 1fr 52px;
    border: 2px #333333 solid;
    border-radius: 20px;
    height: 38px;
}

#know_total__container .search__box input,
#know_total__container .search__box input:focus,
#know_total__container .search__box button {
    border: none;
    background: none;
    outline: none;

}

#know_total__container .search__box input {
    width: 100%;
}

#know_total__container .search__box input {
    padding-left: 15px;
}


#know_total__container .search__box button {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    padding-left: 11px;

    background: url(/cdn/icons/search_btn.svg?v=4);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px;
    background-origin: content-box;
}

#know_total__container .search__box input::placeholder {
    color: #707070;
}

#know_total__container > .head > .title {
    font-size: 44pt;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    #know_total__container > .head > .title {
        font-size: 25pt;
    }
}

@media (max-width: 768px) {
    #know_total__container > .head {
        grid-template-columns: 1fr;
    }

    #know_total__container > .head .search {
        display: flex;
        justify-content: end;
    }

    #know_total__container .search__box {
        max-width: 310px;
        width: 100%;
    }

    #know_total__container > .head > .title {
        font-size: 25pt;
    }
}

/** units */
#know_total__container .units {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 15px;
    align-content: center;
}

#know_total__container .units .date img {
    width: 19px;
}

#know_total__container .units .unit {
    display: grid;
    grid-template-rows: 1fr 40px;
    min-height: 240px;
    border-radius: 10px;
    overflow: hidden;
}
#know_total__container .units .unit a {
    color: black;
    text-decoration: none;
}
#know_total__container .units .unit .part {
    display: grid;
}

#know_total__container .units .unit .part.second {
    background: #333333;
    grid-template-columns: max-content max-content;
    color: white;
    justify-content: space-between;
    padding: 0 19px;
    align-items: center;
    font-style: italic;
}

#know_total__container .units .unit .part.second .date {
    display: grid;
    grid-auto-flow: column;
    gap: 5px;
}

#know_total__container .units .unit .part.first {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 7px 0;
    grid-template-rows: 20px max-content max-content;
    align-content: space-between;
}

#know_total__container .units .unit .part.first .category {
    display: flex;
    align-items: stretch;
    background: #f7aa47;
    width: max-content;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 5px 0px 2px;

    transition: 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition-property: background-color, color;
}

#know_total__container .units .unit .part.first .category:hover {
    background-color: #333333;
    color: #ffcc66;
}

#know_total__container .units .unit .part.first .abstract {
    color: white;
    text-align: center;
    padding: 2px 15px;
    font-size: 14pt;
    font-weight: bold;
    line-height: 125%;
    text-shadow: #333333 -1px 1px;
}

#know_total__container .units .unit .part.first .hashtags {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 9px 7px;
}

#know_total__container .units .unit .part.first .hashtags .hashtag {
    background: #f3d469;
    padding: 0 2px;

    transition: 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition-property: background-color, color;
}

#know_total__container .units .unit .part.first .hashtags .hashtag:hover {
    color: #f7aa47;
    background-color: #333333;
}

#know_total__container .units .unit .part.first .hashtags .hashtag:before {
    content: "#";
}

@media (max-width: 1200px) {
    #know_total__container .units {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    #know_total__container .units {
        grid-template-columns: 1fr;
    }
}