#sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.set {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  cursor: pointer;
}

.set .logo {position: absolute; }
.set .name {font-family: Arial; font-size: 16px; font-weight: bold; 
	margin-bottom: 10px; text-align: center; padding-left: 70px; min-height: 30px;}
.set .descr {font-family: Arial; font-size: 12px; padding-left: 70px; text-align: center; }
.set span {font-style: italic;}


.set .collectionData {font-family: Arial; font-size: 12px; padding-top:20px;}
.set .collectionData span {font-weight: bold; }

.set .collected, .set .collectedfoil {position: relative; margin-bottom: 12px;}
.set progress {width: 265px; height: 5px; border: none; }
.set .value {width: 265px; text-align: center; font-size: 12px; font-weight: bold; position: absolute; top: -8px;}

.set a {color: blue; text-decoration: none;}




@media (max-width: 480px) {

  /* Сетка: одна колонка на всю ширину */
  #sets {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* Карточка сета */
  .set {
    width: 100%;
    box-sizing: border-box;
    border: none;               /* убираем рамку, она излишняя на мобильных */
    border-radius: 10px;
    margin: 0;
    padding: 10px;
    background: #f9f9f9;       /* лёгкий фон, чтобы карточки отличались */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* Компактные карточки на мобильных – убираем лишние отступы */
  .set.compact {
    padding: 5px 10px;           /* уменьшаем вертикальные отступы */
    height: auto;                /* сбрасываем фиксированную высоту, если была */
  }

  .set.compact .collectionData {
    padding: 0 0 0 45px;         /* убираем верхний отступ, т.к. нет прогресс-баров */
  }

  .set.compact .has {
    margin-bottom: 0;            /* убираем возможный нижний отступ у счётчика карт */
  }

  /* Логотип – маленький, слева */
  .set .logo {
    filter: brightness(0.97);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
    height: auto;
  }

  .set.compact .logo {
    top: 5px;
  }

  /* Название – слева, с отступом под логотип */
  .set .name {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    padding-left: 45px;
    margin-bottom: 5px;
    min-height: auto;
  }

  /* Описание (дата, тип) – скрываем, чтобы не загромождать */
  .set .descr {
    display: none;
  }

  /* Блок с данными коллекции */
  .set .collectionData {
    font-size: 12px;
    padding: 8px 0 0 45px;   /* отступ под логотип */
    position: relative;
  }

  /* Прогресс-бары: располагаем друг под другом, без absolute */
  .set .collected,
  .set .collectedfoil {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
  }

  .set .collectedfoil {
    margin-bottom: 0;
  }

  /* Общие стили для прогресс-бара */
  .set progress,
  #menu .info progress {
    width: 100%;
    height: 6px;
  }

  /* Цифра над прогресс-баром */
  .set .value {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    position: absolute;
    top: -10px;              /* поднимаем над прогресс-баром */
    left: 0;
  }

  /* Убираем курсив для экономии места */
  .set span {
    font-style: normal;
  }

  /* Стоимость и остатки – можно чуть уменьшить шрифт */
  .set .cost,
  .set .rest,
  .set .foilrest {
    font-size: 11px;
  }

  /* Ссылка */
  .set a {
    color: blue;
    text-decoration: none;
    word-break: break-word;
  }
}