#bar-section 
{
  padding: 0 1.25rem 1.25rem 1.25rem; /* 0 20px 20px 20px */
  text-align: center;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
}

#bar-section h2 
{
  margin-top: 1rem; /* 16px */
  font-size: 2rem; /* 32px */
  margin-bottom: 0.625rem; /* 10px */
}

#bar-section p 
{
  margin-top: 0;
  font-size: 1.125rem; /* 18px */
  margin-bottom: 2.5rem; /* 40px */
  color: #666;
}

.bar-gallery 
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); /* 250px */
  gap: 1.25rem; /* 20px */
}

.bar-gallery img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); 
  transition: transform 0.3s ease;
}

.bar-gallery img:hover 
{
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); 
}

/* ------------------------------------------------------------------------------------- */

@media (max-width: 37.5rem) /* 600px */ 
{
  #bar-section h2 
  { 
     font-size: 1.5rem; /* 24px */
  }
  #bar-section p 
  { 
     font-size: 0.9rem; /* 14.4px */
  }
}

@media (min-width: 37.5625rem) and (max-width: 56.25rem) /* 601px - 900px */ 
{
  #bar-section h2 
  { 
     font-size: 1.75rem; /* 28px */
  }
  #bar-section p 
  { 
     font-size: 1rem; /* 16px */
  }
}

@media (min-width: 56.3125rem) and (max-width: 75rem) /* 901px - 1200px */ 
{
  #bar-section h2 
  { 
     font-size: 2rem; /* 32px */
  }
  #bar-section p 
  { 
     font-size: 1.1rem; /* 17.6px */
  }
}

@media (min-width: 90.0625rem) /* 1441px */
{
  #bar-section h2 
  {
    font-size: 2.5rem; /* 40px */
  }

  #bar-section p 
  { 
     font-size: 1.3rem; /* 20.8px */
  }
}