21. function bubbleSort(array) {
for (let i = 0; i < array.length; i++) {
for (let ii = 0; ii < array.length; ii++) {
if (array[ii] > array[ii+1]) {
let temp = array[ii];
array[ii] = array[ii+1];
array[ii+1] = temp;
}
}
}
return array;
}
console.log( bubbleSort([4, 2, 1, 3]) );

24. .container {
display: flex;
}

43. /*
header - min-height 80vh
- header images -
- height 100%
- width based on aspect ratio (1.4 * 100vw)
- overflows left to appear centered
- position relative
@media tablet
- no x overflow, just full width
@media desktop
- overflow top / fixed to bottom
*/

51. .ocean {
--height: 80vh;
--ratio: 1.42;
display: grid;
grid-template-rows: minmax(20px, 0.5fr) max-content minmax(100px, 1fr);
grid-template-columns: 100vw;
justify-items: center;
height: var(--height);
&__images {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: var(--height);
min-width: 100%;
width: calc( var(--height) * var(--ratio) );
}
&__content {
z-index: 1;
grid-area: 2 / 1 / 2 / 1;
}
}

52. .image-block {
--push: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
&__caption {
position: absolute;
top: 45%; // Fallback
top: var(—-push);
transform: translateY( var(—-push) );
}
@media($tablet-start) {
--push: 25%;
}
}

53. div {
counter-increment: fizzbuzz;
&:after {
content: counter(fizzbuzz);
}
&:nth-child(3n):before {
content: 'Fizz';
}
&:nth-child(3n):after {
content: '';
}
&:nth-child(5n):after {
content: 'Buzz';
}
}

63. /*
Resize Rules: PhotoStrip
- Mobile: thumbnails fixed width and
overflow to the right.
- Desktop: if the strip has 6, 7, or 8
images, they should auto-size to fit the
space.
- Desktop: if the strip has 9+ images, the
thumbnails should be the same width.
*/

65. .PhotoStrip {
display: flex; // Fallback
display: grid;
grid-column-gap: 0.625rem;
grid-auto-flow: column;
grid-auto-columns: minmax(100px, 190px);
white-space: nowrap;
&__Photo {
width: 100px; // Fallback
width: 100%;
}
}