@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/layout' as *;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

.sticky-media {
	&-columns {
		display: flex;
		gap: var(--padding-huge);

		@include break.max-tablet {
			flex-direction: column-reverse;
		}
	}

	&-fixed-media {
		// grid-column: brandui-col-spacing(9);
		flex-basis: 60%;

		& > * {
			top: 10rem;
		}

		@include break.max-tablet {
			flex-basis: unset;
		}
	}

	&-scrollable-content {
		z-index: 0;
		flex-basis: 40%;
		display: grid;
		gap: var(--padding-medium);
		align-items: start;

		&-item {
			min-height: 50vh;
			display: flex;
			scroll-snap-align: start;

			@include break.max-mobile {
				min-height: 40vh;
			}
		}

		&.grid-cols-2 {
			gap: var(--padding-extra-large);

			@include break.max-mobile {
				grid-template-columns: 1fr;
			}
		}

		@include break.max-tablet {
			flex-basis: unset;
			gap: var(--padding-huge);
		}
	}
}