.wp-block-cb-faqs { margin: 1rem 0 } .wp-block-cb-faqs .faq-label { cursor: pointer; margin: 0; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 0; background-color: var(--wp--preset--color--light-blush) !important; border-radius: 50px; } .wp-block-cb-faqs .faq-label img { margin-right: 1rem; max-width: 100px; } .wp-block-cb-faqs .faq-label h3, .wp-block-cb-faqs .faq-label h4 { margin: 0; vertical-align: middle; } .wp-block-cb-faqs .faq-content { display: none; padding: 0 2rem; border: solid 1px transparent; margin-bottom: 1rem; } .wp-block-cb-faqs .faq-label > * { flex-grow: 1; flex-shrink: 1; } .wp-block-cb-faqs .faq-label:after { content: url('data:image/svg+xml,'); vertical-align: middle; width: 1.75rem; height: 1.75rem; border-radius: 50%; text-align: center; display: inline-block; flex-shrink: 0; margin-left: 1rem; transform: translateY(-5px) rotate(0deg); transition: transform 0.4s ease-in-out; } .wp-block-cb-faqs .faq-label.active { border-color: transparent; } .wp-block-cb-faqs .faq-label.active:after { transform: translateY(5px) rotate(180deg); } .wp-block-cb-faqs.columns-2 { column-count: 2; } .wp-block-cb-faqs.columns-3 { column-count: 3; } .wp-block-cb-faqs.columns-4 { column-count: 4; } .wp-block-cb-faqs .col-break { break-after: column; } @media only screen and (max-width: 768px) { .wp-block-cb-faqs.columns-2, .wp-block-cb-faqs.columns-3, .wp-block-cb-faqs.columns-4 { column-count: 1; } .wp-block-cb-faqs .col-break { break-after: auto; } } @media only screen and (min-width: 769px) and (max-width: 900px) { .wp-block-cb-faqs.columns-3, .wp-block-cb-faqs.columns-4 { column-count: 2; } } .wp-block-cb-faq{ margin-bottom: 1rem; }