/* 1800LIVETALK CSS */

    video {
  max-width: 100%;
  height: auto;
}
/* 1. The container that holds all your columns */
#content-container {
  display: flex;         /* Use Flexbox */
  flex-wrap: wrap;       /* Allow columns to wrap to the next line */
  justify-content: center; /* Center the columns horizontally */
  gap: 20px;           /* Adds spacing between columns (modern) */
/*  padding: 10px;          Padding around the outside */
}
/* 2. Your content column, styled mobile-first */
.content-block {
  /* --- Mobile (Base Style) --- */
  /* As requested, 375px wide on mobile */
  /* We use max-width so it shrinks on screens < 375px */
  width: 100%;
  max-width: 375px; 
  
  box-sizing: border-box; /* Good practice */
  /* Optional: Add a border/shadow to see the block */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
  /* overflow: hidden; */ /* Good for containing content */
}
/* --- Tablet/Desktop Breakpoint --- */
/* When the screen is 600px or wider... */
@media (min-width: 600px) {
  .content-block {
    /* As requested, change width to 600px */
    width: 600px;
    max-width: 600px;
  }
}
/* --- Default (Mobile) Styles --- */

/* 1. Hide the .offer div by default */
.offer {
  display: none;
}

/* 2. Show the .gifBtn by default */
/* (A div is 'display: block' by default, so no code is needed) */
/* .gifBtn { display: block; } */


/* --- Tablet/Desktop Styles --- */

/* When the screen is 600px or WIDER... */
@media (min-width: 600px) {

  /* 1. Show the .offer div again */
  .offer {
    display: block;
  }

  /* 2. Hide the .gifBtn */
  .gifBtn {
    display: none;
  }
}