@charset "utf-8";
/* CSS Document */
body {
            margin: 0;
            padding: 0;
            background-color: black;
			font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
        }
		.text-container {
	        padding: 20px 20px 0px 20px;
            margin: 0 20%;
            max-width: 100%;
		}
		h1 {
			font-weight: 800;
			color: #FFFFFF;
		}
		p {
			color: #FFFFFF;
		}
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            padding: 20px;
            margin: 0 20%;
            max-width: 100%;
        }

        @media (min-width: 1200px) {
            .grid-container {
             grid-template-columns: repeat(7, 1fr);
            }
        }

        .grid-item {
            aspect-ratio: 1;
            background-color: white;
            position: relative;
            padding: 10px;
            box-sizing: border-box;
        }

        .top-text {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: clamp(12px, 1vw, 16px);
        }
        .top-text-r {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: clamp(8px, 0.25vw, 10px);
			color: #CCC;
        }

        .center-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
		.center-text img {
			width: 60%;
			margin: auto;
			
 }
        .bottom-text {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: clamp(10px, 1.5vw, 14px);
			font-weight:200;
        }
@media (min-width: 1200px) {
    .center-text {
        font-size: 44px;
        transition: font-size 0.3s ease; /* Keep consistent transitions across breakpoints */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .center-text {
        font-size: clamp(44px, 10vw + 10px, 144px);
        transition: font-size 0.3s ease; /* Smooth transitions */
    }
}

@media (max-width: 991px) {
    .center-text {
        font-size: clamp(64px, 12vw + 5px, 144px);
        transition: font-size 0.3s ease; /* Smooth transitions */
		font-family:'socialnet';
    }
}

/* taula */
.responsive-table {
    width: 100%;
    max-width: 1200px; /* Restricts table width */
    margin: 20px auto; /* Center the table */
    border-collapse: collapse; /* Collapses borders */
	color: #FFFFFF;
}

.responsive-table td {
	padding: 10px 0px;
}
.responsive-table td img{
	width: 30%;
}
.two-words{
	margin-right: 50px;
}

/* Media query for narrower screens */
@media (max-width: 768px) {
    .responsive-table td:nth-child(n+4) { /* Hide columns 4 to 7 */
        display: none; /* Hide these columns on smaller screens */
    }
}