/* Сетка */        
.atuinCard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px -10px;
}
.atuinCard-container *,
.atuinCard-container *::before,
.atuinCard-container *::after {
    box-sizing: border-box;
}
.atuinCard-col {
    width: 100%;
    padding: 10px;
}
@media (min-width: 576px) {
    .atuinCard-col {
        width: 50%;    
    }
}
@media (min-width: 768px) {
    .atuinCard-col {
        width: 50%;    
    }
}
@media (min-width: 992px) {
    .atuinCard-col {
        width: 33.33%;        
    }
}
@media (min-width: 1200px) {
    .atuinCard-col {
        width: 25%;    
    }
}
@media (min-width: 1400px) {
    .atuinCard-col {
        width: 25%;    
    }
}
 
 
/* Карточка */
.atuinCard {
    position: relative;
    padding: 12px 12px 34px;
    border-radius: 18px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transition: box-shadow 0.3s;
    height: 100%;
}
.atuinCard:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
}
.atuinCard-top {
    display: flex;
    gap: 8px;    
}
.atuinCard-avatar {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23337AB7' d='m2.006 64h59.987c-.448-12.917-9.261-23.913-21.806-27.129l-7.464 7.329c-.401.394-1.045.394-1.446 0l-7.464-7.329c-12.546 3.216-21.358 14.212-21.807 27.129zm29.994-32.123c-8.788 0-15.938-7.15-15.938-15.939 0-8.788 7.15-15.938 15.938-15.938s15.938 7.15 15.938 15.938c0 8.789-7.15 15.939-15.938 15.939z'/%3e%3c/svg%3e");
    background-size: 90%;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    flex: 0 0 60px;
    overflow: hidden;
    border: 4px solid #ddd;
    border-radius: 50%;
}
.atuinCard-avatar img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    object-position: center top;
}
.atuinCard-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.atuinCard-data div:first-child {
    background-size: contain;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 512 512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m512 198.769-177.221-25.591-78.779-159.624-78.779 159.624-177.221 25.591 128.544 124.248-30.088 175.429 157.544-82.822 157.544 82.822-30.088-175.429z' fill='%23fed843'/%3e%3cpath d='m383.456 323.017 128.544-124.248-177.221-25.591-78.779-159.624v402.07l157.544 82.822z' fill='%23fabe2c'/%3e%3c/g%3e%3c/svg%3e");
}
.atuinCard-rating-1 {
    width: 20px;
}
.atuinCard-rating-2 {
    width: 40px;
}
.atuinCard-rating-3 {
    width: 60px;
}
.atuinCard-rating-4 {
    width: 80px;
}
.atuinCard-rating-5 {
    width: 100px;
}
.atuinCard-name {
    font-size: 15px;
    font-weight: bold;
    color: #337AB7;
}
.atuinCard-date {
    font-size: 14px;
    color: #909090;
}
.atuinCard-middle {
    max-height: 220px;
    overflow: hidden;
    position: relative;
}
.atuinCard-middle.atuinCard-close {
    max-height: none;
}
.atuinCard-middle.atuinCard-gradient:after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 75%)    
}
.atuinCard-middle p {
    padding: 10px 0 0 4px;
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}
.atuinCard-middle button {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px;
    border: none;
    color: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    font-size: 15px;
    transition: color 0.4s;
    cursor: pointer;
    background: transparent;
    z-index: 1;
}
.atuinCard-middle.atuinCard-close button {
    position: static;
    padding: 10px 10px 0;
}
.atuinCard-middle button:hover {
    color: rgba(0, 0, 0, 1);
}
.atuinCard-bottom {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 14px;
    color: #909090;
    transition: color 0.4s;
    text-decoration: none;
}
.atuinCard-bottom:hover {
    color: #000;
}