rafibomb

.team-block {
  @include push-center;
	position:relative;
  max-width: 340px;

	@for $i from 1 to 18 {
		&[data-random-order='#{$i}'] {
			order: #{$i};
		}
	}

rafibomb

const teamGrid = document.querySelector('.team-block-grid');

if (teamGrid) {
  const teamBlockItems = Array.from(teamGrid.querySelectorAll('.team-block[data-randomize]'));

  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i

      // swap elements array[i] and array[j]

rafibomb

// -----------------------
// Modal Content | Colornav Styles
// -----------------------

$countries: australia, belgium, brazil, canada, china, denmark, france, germany, great-britain, greece, italy, jamaica, japan, mexico, netherlands, new-zealand, russia, south-africa, south-korea, spain, sweden, united-states;

.international-band-gallery {
	@each $country in $countries {
		.colornav-swatch-#{$country} {
			@include picture(overview_international_countries_int_#{$country}_select);

rafibomb

constructor(options){
		super(options);
		this.scrollGroup = this.anim.getGroupForTarget(this.el);

		this.toggle = document.getElementById('toggleControl');
		this.toggleS7 = document.querySelector('.toggle-label-s7');
		this.toggleS3 = document.querySelector('.toggle-label-s3');
		this.hardware = document.querySelector('.tile-image-wrapper');
		this.imageS7 = this.hardware.querySelector('.image-display-s7');
		this.imageS3 = this.hardware.querySelector('.image-display-s3');

rafibomb

.tile-display {
	--transition-time: 1s;
	--transition-easing: ease-in-out;
	text-align: left;
	background-color: swatch(fill);
	border-radius: var(--tile-radius);
	margin-bottom: 150px;

	.tile-content-wrapper {
		--column-gap: 50px;

rafibomb

$trainers: 
		// trainers gallery top row
		sam-sanchez,
		amir-ekbatani,
		betina-gozo,
		tyrell-desean,
		kym-perfetto,
		lashawn-jones,
		jhon-gonzalez,
		josh-crosby,

rafibomb

[
			[this.galleriesRowTop,    this.timelineGroups[0]],
			[this.galleriesRowBottom, this.timelineGroups[1]],
		].forEach(([galleries, timegroup]) => {
			galleries.forEach(gallery => {
				timegroup.addKeyframe(gallery, {
					start: 0,
					end: "css(--gallery-duration)",
					x: ["css(--gallery-gap)", "-1 * (css(--gallery-count) * (css(--gallery-item-width) + css(--gallery-gap))) + css(--gallery-gap)"],
					disabledWhen: ['static-layout'],

rafibomb

This release has been a long time coming and contains tons of great updates to the framework and surrounding ecosystem.

Foundation 6.6 has dropped and it is LOADED. Code named "Farout" after the furthest away planet discovered to date, this new release is jam-packed with important new features and bug fixes that push the framework toward the future. Check out the details below:

# Featured Enhancements
- 🚀 [#](https://github.com/foundation/foundation-sites/pull/11405) - Refactor XY Grid cell mixins (See migration) Includes: 
  - Updates XY Grid static classes generation and XY Grid mixins
  - Adds XY Grid functions
  - Adds new XY Grid mixins
  - Adds utility functions

rafibomb

@for $i from 1 through 21 {
  &:nth-child(#{$i}){
    animation-delay: $i * 0.15s;
  }
}

rafibomb

$filter-panel-width: rem-calc(368);
$filter-panel-background: $white;
$filter-panel-transition-easing: $offcanvas-transition-timing;
$filter-panel-transition-timing: $offcanvas-transition-length;
$filter-panel-content-padding: 1rem;
$filter-panel-z-index: 12;
$filter-panel-shadow: -1px 0 10px 0 rgba($black, 0.4);

.filter-panel {
  position: fixed;