:root {  
  --name-padding-bottom: 10px;  
  --button-text-color: #ffffff;  
  --wifi-button-color: #000000;  
}  


.main-content {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
  gap: 20px;  
  max-width: 1300px;  
  margin-left: auto;  
  margin-right: auto;  
  width: 100%;  
  padding: 20px 0;  
  box-sizing: border-box;  
}

/* Tablet: 2 vedľa seba */  
@media (max-width: 1100px) {  
  .main-content {  
    grid-template-columns: repeat(2, 1fr);  
    max-width: 700px;  
    padding: 10px 0;  
  }  
}  

/* Mobil: 1 stĺpec */  
@media (max-width: 700px) {  
  .main-content {  
    grid-template-columns: 1fr;  
    max-width: 95vw;  
    padding: 6px 0;  
  }  
  .item {  
    padding: 12px;  
    min-height: 120px;  
  }  
  .ahref {  
    font-size: 18px;  
    padding: 0.7rem 1.2rem;  
    min-width: 90px;  
  }  
}  

/*** STYLING BOXOV ***/  
.item {  
  border-radius: 20px;  
  padding: 20px;  
  background: #fff;  
  box-shadow: 0 4px 8px rgba(0,0,0,0.04);  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;   /* Button vždy dole */  
  align-items: center;              /* Všetko centrované */  
  min-height: 230px;  
  transition: transform 0.3s, box-shadow 0.3s;  
  overflow: hidden;  
}  

/* Zamedz rozťahovaniu “Vstúpiť” do rohu */  
.ahref {  
  display: block;  
  margin-left: auto;  
  margin-right: auto;  
  background: transparent;  
  color: var(--button-text-color);  
  border: 3px solid var(--button-text-color);  
  border-radius: 50px;  
  padding: 0.8rem 2.2rem;  
  font: 22px "Margarine", sans-serif;  
  text-decoration: none;  
  transition: background 0.2s, color 0.2s;  
  min-width: 105px;  
  box-sizing: border-box;  
  text-align: center;  
  white-space: nowrap;  
  position: static !important; /* Zruš absolútnu pozíciu, ak by bola */  
  align-self: center !important; /* Zabezpeč, že je centrované */  
}  

.ahref:hover {  
  background: transparent;  
  color: var(--button-text-color);  
}  

.wifi-item .ahref {  
  color: var(--wifi-button-color);  
  border-color: var(--wifi-button-color);  
}  

.wifi-item .ahref:hover {  
  background: transparent;  
  color: var(--wifi-button-color);  
}  

.name {  
  text-align: center;  
  width: 100%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  flex: 1;  
  justify-content: center;  
  margin-bottom: 20px !important;  
  padding-bottom: var(--name-padding-bottom);  
}  

.title-text {  
  color: #ffffff;  
  font-weight: 900;  
  margin-top: 10px;  
  margin-bottom: 0;  
}  

.wifi-item .title-text {  
  color: var(--wifi-button-color);  
}  

.button-jittery a {  
  animation: jittery 4s infinite;  
  color: #ffffff;  
}  
.title-text br {  
  display: block;  
  content: "";  
  margin-top: 5px;  
}  

@keyframes jittery {  
  5%, 50% { transform: scale(1);}  
  10% { transform: scale(0.9);}  
  15% { transform: scale(1.15);}  
  20% { transform: scale(1.15) rotate(-5deg);}  
  25% { transform: scale(1.15) rotate(5deg);}  
  30% { transform: scale(1.15) rotate(-3deg);}  
  35% { transform: scale(1.15) rotate(2deg);}  
  40% { transform: scale(1.15) rotate(0);}  
}