/* acf-repeater-dynamic-display.css */

/* Style the container for the repeater field */
.acf-repeater {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Style each repeater row */
.acf-repeater-row {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

/* Style the title for each row */
.acf-repeater-row h4 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 40px;
	margin-top: 60px;
}

/* Flex container for image and map */
.acf-repeater-row .acf-flex-container {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center; /* Center align items */
}

/* Style the image in each row */
.acf-repeater-row img {
	
  max-width: 45%;
  width: 45%;
  height: auto;
    border-radius: 5px;
    flex: 1; /* Make the image take up available space */
}

/* Style the map container */
.acf-map {
  max-width: 45%;
  width: 45%;
	height: 600px;
  max-height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    flex: 1; /* Make the map take up available space */
}

/* Style the map marker */
.acf-map .marker {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style for the title above all repeater fields */
#repeater-title {
    display: none; /* Hidden by default */
    text-align: center;
    font-size: 2em;
    margin: 20px 0; /* Add space around the title */
}

@media screen and (max-width: 900px) { 
	
	/* Adjust 900px to your preferred breakpoint */
.acf-repeater-row .acf-flex-container {
        flex-direction: column; /* Change to vertical alignment on smaller screens */
    }

 .acf-map {
        min-width: 100%; /* Ensure the items take full width when stacked */
	min-height: 300px!important;
    }
	
.acf-repeater-row img {
		 width: 100%;
	
	}
}