:root {
	--color-primary: #94cf4e;
	--color-accent: #74a33d;
	--color-text: #1d1d1b;
}

:where(.wp-block-group.has-background) {
    padding: 0;
}

/* Locations Page */
.locations-grid {
	font-size: 1.6rem;
	margin-top: 4rem;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	
	img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: 50%;
	}
	
	h2 {
		margin-top: unset !important;
		margin-bottom: unset !important;
		color: var(--color-primary);
	}
	
	.locations-card {
		background: #2a2a28;
		padding: 4rem;
		border-radius: 1.5rem;
		height: 100%;
		transition: all ease-in-out 0.3s;
		
		&:hover {
			background-color: #fff;
			color: var(--color-text);
			h2 {
				color: var(--color-text);
			}
            .wp-element-button {
                border: 1px solid transparent;
                background-color: var(--color-accent);
                color: #fff !important;
            }
		}
	}
	
	.wp-element-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-primary);
		background-color: transparent;
        color: var(--color-primary) !important;
		border-radius: 0.5rem;
		text-transform: uppercase;
		font-size: 16px;
        font-weight: 600;
        &:hover {
            border: 1px solid transparent;
                background-color: var(--color-accent);
                color: #fff !important;
        }
        &::after {
                content: url(../img/icons/right-alt.svg);
                display: block;
                width: 2.4rem;
                height: 2.4rem;
                margin-left: 5px;
                margin-top: 5px;
        }
	}
}
@media (max-width: 991px) {
	.locations-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 767px) {
	.locations-grid {
		grid-template-columns: 1fr !important;
	}
}