/* Basic reset and layout styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content-layout {
  display: grid;
  grid-template-columns: 10% 80% 10%; /* Left, Center, Right columns */
  gap: 20px;
  padding: 20px;
}

/* Left, Right, and Center Styling */
.left-sidebar, .right-sidebar, .center-content {
  background-color: #e0e0e0;
  padding: 10px;
}

.center-content {
  background-color: #f9f9f9;
}

/* Styling for ad banners */
.affiliate-banner {
  padding: 15px;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  font-weight: bold;
  background-size: cover;
  color: #333;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr; /* Stacks all columns on mobile */
    grid-template-rows: auto auto auto; /* Each item gets its own row */
  }

  .center-content {
    order: 1; /* Center content appears first */
  }

  .left-sidebar {
    order: 2; /* Left sidebar appears second */
  }

  .right-sidebar {
    order: 3; /* Right sidebar appears last */
  }
}


.ad-container.footer-ad {
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}


@media (max-width: 768px) {
  .ad-container.footer-ad {
      margin: 10px auto;
      padding: 5px;
      border-radius: 4px;
  }
}