.wpfox-upcoming-career-events {
	--cols: 3;
	--block-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 1px);
	--gap: max(30px,var(--spacing-30));
	
	* + & {
		margin-top: max(20px,var(--spacing-25)) !important;
	}
	
	.event-blocks {
		display: flex;
		gap: var(--gap);
		
		.event-block {
			--bg-color: #fff;
			--text-color: var(--wp--preset--color--custom-dark-green);
			width: var(--block-width);
			box-shadow: 0 var(--spacing-3) var(--spacing-6) #00000029;
			background-color: var(--bg-color);
			color: var(--text-color);
			transition: box-shadow 0.4s;
			
			&:hover {
				box-shadow: 0 var(--spacing-3) var(--spacing-6) #00000050;
			}
			
			a {
				text-decoration: none;
			}
			
			.wrapper {
				display: flex;
				flex-direction: column;
				height: 100%;
				
				.event-image {
					position: relative;
					padding-bottom: calc(100% * 320 / 351);
					
					img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center center;
					}
				}
				
				.event-meta {
					--padding-bottom: max(40px,var(--spacing-40));
					display: flex;
					position: relative;
					flex-grow: 1;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					padding: max(40px,var(--spacing-50)) max(50px,var(--spacing-60)) var(--padding-bottom) max(25px,var(--spacing-30));
	
					.event-date {
						--font-size: 15;
						color: var(--wp--preset--color--custom-dark-grey);
						font-weight: 600;
						line-height: calc(25/15);
						text-transform: uppercase;
						letter-spacing: calc(2.4em/15);
						margin: 0;
					}
	
					.event-title {
						--font-size: 19;
						color: var(--text-color);
						font-weight: 700;
						margin: 0.6em 0 0;
					}
	
					.event-location {
						--font-size: 16;
						color: var(--wp--preset--color--custom-dark);
						font-weight: 400;
						margin: 0.7em 0 0;
					}
					
					& .icon {
						position: absolute;
						bottom: var(--padding-bottom);
						right: max(25px,var(--spacing-35));
						font-family: 'icomoon' !important;
						speak: never;
						font-style: normal;
						font-weight: normal;
						font-variant: normal;
						text-transform: none;
						line-height: 1;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						display: block;
						height: 1em;
						width: 1em;
						color: var(--text-color);
						transform: translateX(0);
						transition: transform 0.4s;
						
						&.icon-internal {
							&::before {
								font-size: 0.6em;
								content: "\e907";
								position: relative;
								top: -0.6em;
							}
						}
						
						&.icon-external {
							&::before {
								font-size: 0.9em;
								content: "\e901";
								top: -0.3em;
								position: relative;
							}
						}
						
						.event-block:hover & {
							transform: translateX(var(--spacing-5));
						}
					}
				}
			}
		}
	}

	@media (max-width: 959px) {
		& {
			--cols: 2;
			
			.event-block:last-child {
				display: none;
			}
		}
	}

	@media (max-width: 639px) {
		& {
			--cols: 1;
			
			.event-blocks {
				flex-wrap: wrap;
			
				.event-block:last-child {
					display: block;
				}
				
				.event-block.no-image .image {
					display: none;
				}
			}
		}
	}
}