.confluence-page-logo {
  margin: 2rem 0 2.5rem;
  text-align: center;
  
  img {
	  max-width: 450px;
		margin-bottom: 1.5rem;
		
		@media (width <= 768px) {
			max-width: 300px;
		}
	}
}

/* --- Stream navigation tabs --- */
.view-confluence-stream-nav .view-content {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem
}

.stream-tab {
	--transition-duration: 400ms;
	
  flex: 1;
  padding: 0.75rem;
  border-radius: 0.5rem;
  corner-shape: squircle;
  transition: all var(--transition-duration);
  
 
  @media (width <= 768px) {
	  padding: 0.25rem;
	  &.desktop {
	  	display: none;
	  }
	}
	
	&.mobile {
  	display: none;
  	margin-top: 1rem;
    padding: 0.75rem;
    
		.stream-tab-link {
  	 	font-size: 1.75rem;
		}
    
    .stream-tab-bar {
    	height: 0.5rem;
	  	margin-top: 0.5rem;
		}
		
  	@media (width <= 768px) {
  	 	display: block;
		}
  }
  
  &:hover {
  	background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
  }
  
  &.active {
	  background-color: var(--primary-color);
	  
	  .stream-tab-link {
		  color: white;
		  
		  &:hover {
		  	color: color-mix(in srgb, var(--secondary-color), white 80%);
			}
		}
	  
	  .stream-tab-bar {
		  background-color: color-mix(in srgb, var(--secondary-color), transparent 50%);
		}
	}
	
	.stream-tab-link {
	  display: block;
	  max-width: 12ch;
	  color: var(--primary-color);
	  font-size: 1.75rem;
	  font-weight: 700;
	  line-height: 1.2;
	  text-decoration: none;
	  transition: all var(--transition-duration);
	  
	  @media (width <= 768px) {
	  	font-size: 1rem;
		}
	  
	  &:hover {
	  	color: var(--secondary-color);
		}
		
	}
	
	.stream-tab-bar {
	  width: 100%;
	  height: 0.5rem;
	  margin-top: 0.5rem;
	  border-radius: 1rem;
	  background-color: var(--primary-color);
	  
	  @media (width <= 768px) {
	  	height: 0.25rem;
	  	margin-top: 0.25rem;
		}
	}
}

/* --- Stream description --- */
.field--name-description {
	display: flex;
  justify-content: center;
  margin-top: .5rem;
  margin-bottom: 4rem;
  padding: 2rem;
  background-color: color-mix(in srgb, var(--secondary-color), transparent 95%);
  border-radius: 0.75rem;
  corner-shape: squircle;
  
  @media (width <= 768px) {
  	border-radius: 0.5rem;
  	margin-bottom: 3rem;
	  padding: 1rem;
	}
  
  p {
  	max-width: 75ch;
  	margin: 0;
  	font-size: 1.375rem;
  	/*font-weight: 300;*/
  	line-height: 1.5;
  	
  	@media (width <= 768px) {
  		font-size: 1.25rem;
			line-height: 1.4;
		}
  	
  	strong {
  		color: var(--primary-color);
  	}
  }
}

/* --- Project list/grid --- */
.view-confluence-stream-projects {
	--font-family: Lato, sans-serif;
	--text-color: #333;
	--transition-duration: 400ms;
	
	margin-bottom: 5rem;
	
	.view-content {
	  display: flex;
	  flex-wrap: wrap;
	}
	
	/* --- Project Card --- */
  .project-tile {
  	padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    padding-inline: 0.75rem;
	  border-radius: 0.75rem;
	  corner-shape: squircle;
  	transition: all var(--transition-duration);
  
	  &:hover {
			background-color: color-mix(in srgb, var(--primary-color), transparent 90%);
			.img-wrapper {
				border-radius: 1.5rem;	
			}
			img {
				scale: 1.1;
			}
		}
	  
	  .img-wrapper {
	  	--color: #eee;
			min-height: 180px;
			overflow: hidden;
			margin-bottom: 0.75rem;
			border-radius: 1rem;
			corner-shape: squircle;
			transition: all var(--transition-duration);
				  
			img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				object-position: center;
				padding: 0;
				transition: all var(--transition-duration);
			}
		}
	  
	  h3 {
	  	margin-bottom: 0.25rem;
	  	font-family: var(--font-family);
	  	font-size: 1.25rem;
	  	font-weight: 500;
	  	line-height: 1.4;
	  	
	  	a {
	  		color: var(--text-color);
	  		text-decoration: none;
				
				&:hover {
				  color: var(--primary-color);
				}
	  	}
	  }
	  
		.see-more {
			display: inline-flex;
			align-items: center;
			height: 1rem;
			margin-top: 0.4rem;
			margin-left: 0.2rem;
			padding-inline: .2rem;
			border-radius: .25rem;
			corner-shape: squircle;
			background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
			color: var(--text-color);
			font-size: .9rem;
			text-decoration: none;
			transition: all var(--transition-duration);
				 
				&:hover {
					background-color: color-mix(in srgb, var(--secondary-color), transparent 85%);
					color: var(--primary-color);
				}
			 
			}
  }
}