Content Job Roles Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-job-roles-grid {
	&__meta {
		display: flex;
		flex-direction: row;
		gap: rem-calc(16);
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include margin-bottom( rem-calc(60) );

		.heading {
			@include margin-bottom( rem-calc(24) );
			color: var( --text-color );
		}

		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__grid {
		gap: rem-calc( 16 0 );
	}

	&__card {
		display: flex;
		flex-direction: column;
		transition: 0.3s box-shadow var( --ease ), 0.3s opacity var( --ease ), 0.3s transform var( --ease );

		&[data-aos^=fade][data-aos^=fade] {
			transition: 0.3s box-shadow var( --ease ), 0.3s opacity var( --ease ), 0.3s transform var( --ease );
		}

		&:hover {
			box-shadow: 0 0 rem-calc(32) 0 rgba(3, 10, 50, 0.3);
		}

		a {
			text-decoration: none;
			color: var(--text-color);
			padding-top: rem-calc(15);
			padding-bottom: rem-calc(10);

			&[href='#'] {
				pointer-events: none;
			}
		}

		picture,
		.no-image {
			width: 100%;
			display: flex;
			flex-direction: column;

			@include bp($lg) {
				aspect-ratio: 410/230;
			}
		}

		picture {
			display: flex;
			flex-direction: column;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.no-image {
			background-color: $grey;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			text-transform: uppercase;
			font-weight: 800;
			color: rgba($primary, 0.25);
		}

		p {
			@include margin-top( rem-calc(12) );
			font-weight: 700;
			margin-bottom: 0;
		}
	}
}