/* =========================
   SECTION-Gallery
   ========================= */
  .gallery__container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .gallery-media{
    width: 100%;
  }

  .gallery-tabs {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    
    width: 100%;
    padding: 20px 16px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 10px 18px;
    
    background: var(--color-bg-light);
    color: var(--color-dark);
    
    border: 1px solid var(--color-accent);
    border-radius: 2px;
  
    cursor: pointer;
  }

  .gallery-tab:hover,
  .gallery-tab.active,
  .gallery-tab:focus-visible {
    background: var(--color-bg-dark);
    color: var(--color-light);
  }

  .gallery-tabs::-webkit-scrollbar {
    display: none;
  }

  .gallery-image-box{
    position: relative;
    overflow: hidden;
    width: 100%;

    aspect-ratio: 4 / 5;
    border: 1px solid var(--color-accent);
    border-radius: 2px;
  }

  .gallery-image-box img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
    border: 1px solid var(--color-dark);
    border-radius: 1px;
  }

  .gallery-content{
    width: 100%;
  }

  .gallery-title{
    text-align: center;
    color: var(--color-dark);
  }
  
  .gallery-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 10px;
  }

  .gallery-btn {
    width: 68px;
    height: 40px;

    background: var(--color-bg-light);
    color: var(--color-dark);

    border: 1px solid var(--color-accent);
    border-radius: 2px;
    
    cursor: pointer;
  }

  .gallery-btn:hover,
  .gallery-btn:focus-visible {
    background: var(--color-bg-dark);
    color: var(--color-light);
  }

  /* =================================================================================
                                    TABLET (768px)
  ================================================================================== */
  @media (min-width: 768px){
    .gallery-image-box{
      aspect-ratio: 16 / 10;
    }

  }

  /* =================================================================================
                                    DESKTOP (1024px)
  ================================================================================== */
  @media (min-width: 1024px){
    
    .gallery-image-box{
      aspect-ratio: 16 / 9;
    }
  }