/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* Texto con el color #003366 */
.text-color-db {
    color: #003366;
}

/* Texto con el color #d4af37 */
.text-color-y {
    color: #d4af37;
}

/* Texto con el color #ffc107 */
.text-color-yi {
    color: #ffc107;
}

/* Clases de shadows con el color #003366 */
.shadow-db-50 { box-shadow: 0 4px 6px rgba(0, 51, 102, 0.3); }
.shadow-db-100 { box-shadow: 0 8px 12px rgba(0, 51, 102, 0.45); }
.shadow-db-150 { box-shadow: 0 12px 16px rgba(0, 51, 102, 0.6); }
.shadow-db-200 { box-shadow: 0 16px 24px rgba(0, 51, 102, 0.75); }
.shadow-db-250 { box-shadow: 0 20px 30px rgba(0, 51, 102, 0.85); }
.shadow-db-300 { box-shadow: 0 24px 36px rgba(0, 51, 102, 0.9); }
.shadow-db-350 { box-shadow: 0 28px 42px rgba(0, 51, 102, 0.95); }
.shadow-db-400 { box-shadow: 0 32px 48px rgba(0, 51, 102, 1); }
.shadow-db-450 { box-shadow: 0 36px 54px rgba(0, 51, 102, 1.05); }
.shadow-db-500 { box-shadow: 0 40px 60px rgba(0, 51, 102, 1.1); }
.shadow-db-550 { box-shadow: 0 44px 66px rgba(0, 51, 102, 1.15); }
.shadow-db-600 { box-shadow: 0 48px 72px rgba(0, 51, 102, 1.2); }
.shadow-db-650 { box-shadow: 0 52px 78px rgba(0, 51, 102, 1.25); }
.shadow-db-700 { box-shadow: 0 56px 84px rgba(0, 51, 102, 1.3); }
.shadow-db-750 { box-shadow: 0 60px 90px rgba(0, 51, 102, 1.35); }
.shadow-db-800 { box-shadow: 0 64px 96px rgba(0, 51, 102, 1.4); }
.shadow-db-850 { box-shadow: 0 68px 102px rgba(0, 51, 102, 1.45); }
.shadow-db-900 { box-shadow: 0 72px 108px rgba(0, 51, 102, 1.5); }

/* Clases de shadows con el color #d4af37 */
.shadow-y-50 { box-shadow: 0 4px 6px rgba(212, 175, 55, 0.3); }
.shadow-y-100 { box-shadow: 0 8px 12px rgba(212, 175, 55, 0.45); }
.shadow-y-150 { box-shadow: 0 12px 16px rgba(212, 175, 55, 0.6); }
.shadow-y-200 { box-shadow: 0 16px 24px rgba(212, 175, 55, 0.75); }
.shadow-y-250 { box-shadow: 0 20px 30px rgba(212, 175, 55, 0.85); }
.shadow-y-300 { box-shadow: 0 24px 36px rgba(212, 175, 55, 0.9); }
.shadow-y-350 { box-shadow: 0 28px 42px rgba(212, 175, 55, 0.95); }
.shadow-y-400 { box-shadow: 0 32px 48px rgba(212, 175, 55, 1); }
.shadow-y-450 { box-shadow: 0 36px 54px rgba(212, 175, 55, 1.05); }
.shadow-y-500 { box-shadow: 0 40px 60px rgba(212, 175, 55, 1.1); }
.shadow-y-550 { box-shadow: 0 44px 66px rgba(212, 175, 55, 1.15); }
.shadow-y-600 { box-shadow: 0 48px 72px rgba(212, 175, 55, 1.2); }
.shadow-y-650 { box-shadow: 0 52px 78px rgba(212, 175, 55, 1.25); }
.shadow-y-700 { box-shadow: 0 56px 84px rgba(212, 175, 55, 1.3); }
.shadow-y-750 { box-shadow: 0 60px 90px rgba(212, 175, 55, 1.35); }
.shadow-y-800 { box-shadow: 0 64px 96px rgba(212, 175, 55, 1.4); }
.shadow-y-850 { box-shadow: 0 68px 102px rgba(212, 175, 55, 1.45); }
.shadow-y-900 { box-shadow: 0 72px 108px rgba(212, 175, 55, 1.5); }

/* CSS para aplicar dos columnas si hay más de 5 ítems en la versión de escritorio */
.items-container {
  display: grid !important;
  gap: 1em !important;
}

@media (min-width: 768px) { /* Ajusta el valor según el punto de interrupción de tu diseño */
  .items-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}

.item {
  break-inside: avoid !important;
}

.font-merri {
    font-family: 'Merriweather', serif;
}

.font-play {
    font-family: 'Playfair Display', serif;
}