/* Reset */
html, body, a, div, section {
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
}

h1 {
font-family: "Cal Sans", sans-serif;
font-weight: 220;
font-style: normal;
letter-spacing: 2px;
color: #fff;
text-align: center;
font-size: 1em;
line-height: 25px;

}


p {
  font-family: "Cal Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}


p {
font-size: 12px;
padding: 5px;
}

/* Layout */
.navbar {
padding: 20px;
position: relative;
z-index: 10;
}

.inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.container {
display: flex;
flex-wrap: wrap; /* POZWALA ZAWIJAĆ ELEMENTY */
justify-content: center;
gap: 30px;
padding: 40px 0;
margin-top: 50px;
}

/* 3 boxy w rzędzie — np. 30% z marginesami */
.box {
width: calc(33.333% - 40px);
max-width: 220px;
height: 220px;
border: 3px dashed grey;
box-sizing: border-box;

display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
.box {
width: calc(50% - 30px); /* 2 w rzędzie na tabletach */
}
}

@media only screen and (max-width: 480px) {
.box {
width: 100%; /* 1 box na małym ekranie */
}

.container {
padding: 20px;
}
}