/* Basic styles for the frontend */

.hcfb-frontend-container {
    margin: 20px;
}

.ui-tabs .ui-tabs-panel {
    display: none;
}

.ui-tabs .ui-tabs-panel.ui-tabs-active {
    display: block;
}

.hcfb-block {
    margin-bottom: 20px;
}

.hcfb-block.multiple-selection a.hcfb-option-link {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    color: #0073aa;
}

.hcfb-block.multiple-selection a.hcfb-option-link:hover {
    text-decoration: underline;
}

.hcfb-block.image-selection a.hcfb-image-link img {
    border: 2px solid transparent;
}

.hcfb-block.image-selection a.hcfb-image-link:hover img {
    border-color: #0073aa;
}

.hcfb-block.input-field form {
    margin-bottom: 20px;
}

.hcfb-block.input-field button {
    margin-top: 10px;
}



/* Ensure that only the active tab content is displayed */
.ui-tabs .ui-tabs-panel {
    display: none;
}

.ui-tabs .ui-tabs-panel.ui-tabs-active {
    display: block;
}

.hcfb-frontend-container img{
    width: 100%;
}


.hcfb-image-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns of equal width */
    gap: 10px; /* Space between grid items */
}

.hcfb-image-group-item {
    text-align: center;
    padding: 10px;
}

.hcfb-image-group-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* For the 2-row layout, you may want to adjust the height if needed */
.hcfb-image-group.layout-2-rows {
    grid-template-columns: repeat(3, 1fr); /* Still 3 columns */
    grid-auto-rows: auto; /* Auto row height */
    grid-auto-flow: row; /* Flow in row direction */
}


.hcfb-image-item p {
    margin-top: 10px;
    font-size: 14px;
}


.page .ui-tabs-nav{
    display: none;
}

.hcfb-headline-block h2 {
    /* Add your styles here */
    margin-bottom: 20px;
    color: #1c212c;
}