@media screen and (max-width: 28rem) {

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Helvetica Neue';
	margin: 0;
	color: var(--text-color--primary);
}

main {
	display: block;
	aspect-ratio: auto;
	position: relative;
}

.global-padding {
	position: relative;
	padding-left: var(--global-container-padding);
	padding-right: var(--global-container-padding);
}

.padding-xlarge {
	padding-top: var(--global-padding-xlarge);
	padding-bottom: var(--global-padding-xlarge);
}

.padding-large {
	padding-top: var(--global-padding-large);
	padding-bottom: var(--global-padding-large);
}

.padding-medium {
	padding-top: var(--global-padding-medium);
	padding-bottom: var(--global-padding-medium);
}

.container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 92rem;
}


/* Text */

p {
	font-size: var(--p-size);
	line-height: var(--p-line-height);
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 1.25rem;
	& > a {
		font-weight: 400;
	}
}

a {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

h1 {
	font-weight: 500;
}

h2 {
	/* font-size: 1.3rem; */
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 1.25rem;
}

h3 {
	font-size: 1.3rem;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 1.25rem;
}

/* Images */

.img-responsive {
	display: block;
	width: 100%;
	height: auto;
}

/* Columns */

.columns {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	& > .column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
}

/* Image Blocks */

.image-blocks__container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.image-block {
	& > .image-block__content {
		padding: 2rem 0;
	}
}

/* Posts */

.post-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

/* Post Article */

.post {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	text-decoration: none;
}

.post__image-wrap {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--brand-border-radius);
	overflow: hidden;
}

.post__image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post__info-wrap { 
	width: 100%;
	padding: 1.5rem 0;
}

.post__title {
	font-size: 1.3rem;
	font-weight: 300;
}

/* Posts Filter */

.project-filter__wrapper {
	display: flex;
	justify-content: space-between;
	padding-bottom: 2rem;
}

.project-filter__list {
	display: flex;
	gap: 2rem;
}

.project-filter__link {
	font-size: 1.1rem;
	font-weight: 300;
	text-decoration: none;
}

.project-filter__reset {
	font-size: 1.1rem;
	font-weight: 400;
	text-decoration: none;
}

.pagination__next {
	visibility: hidden;
}

/* Post */

.post-hero {
  min-height: 30vh;
}

.post-hero__header {
  justify-content: space-between!important;
  padding: 2rem 0;
}

.post-hero__title {
	font-size: 2.8rem;
	line-height: 3.4rem;
	font-weight: 300;
	margin: 0;
}

.post-hero__details {
  position: relative;
  display: flex;
  gap: 3rem;
}

.post-hero__detail {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--p-size);
  font-weight: 300;
  gap: 1rem;
}

.post-hero__detail-heading {
  color: var(--brand-color--grey);
}

.post-hero__image-wrapper {
  /* aspect-ratio: 4/2; */
  width: 100%;
  height: 100%;
  & > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
	margin: 0 auto;
	width: 100%;
}

.post-content {
  display: block;
  width: 100%;
}

.post-sidebar {
  width: 100%;
  margin-bottom: 3rem;
}

.post-sidebar__info {
  padding: 2rem 0;
}

.post-sidebar__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: 0.4rem;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  list-style-type: none;
}

.post-contact {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: var(--brand-color--white);
  background-color: var(--brand-color--black);
  border-radius: var(--brand-border-radius);
  padding: 2.2rem;
  height: 40vh;
  /* border: 1px solid var(--brand-color--grey); */
}

.post-contact__info {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: 0.4rem;
  width: 100%;
}

.post-sidebar__spacer {
  flex-grow: 2;
}

/* Sections */

.section:first-of-type:not(.section--hero) {
	padding-top: 8rem;
}

.section__header {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 4rem;
}

.section__header-left {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.section__header-title {
	font-size: 1.5rem;
	margin-bottom: 0;
	margin-top: 0.5rem;
}

.section__header-copy-wrapper {
	font-size: var(--header-copy-size);
	line-height: var(--header-copy-line-height);
	& > * {
		font-size: inherit;
		line-height: inherit;
	}
}

/* .section__header:not(.section__header--columned) .section__header-copy-wrapper {
	max-width: 75%;
} */

.section__content:not(:last-of-type) {
	margin-bottom: 3.5rem;
}

.section__inner-content {
  container-type: inline-size;
}

.section__header.section__header--columned ~ .section__content {
	position: relative;
	
}

/* .section__header:not(.section__header--columned) ~ .section__content {
	max-width: 75%;
} */

.section__full-width {
	margin:1em -100%; /* old browsers fallback */
	margin:1em calc(50% - 50vw);
}

/* HERO */

.section--hero {
	position: relative;
	display: flex;
	min-height: 100vh;
	color: #fff;
	background-image: linear-gradient(#cdcdcd63,#00000063);
	flex-flow: column;
	justify-content: center;
	align-items: stretch;
	& .hero__title {
		font-size: 4.4rem;
		text-align: center;
		font-weight: 500;
	}
}

.section--hero-basic {
	display: flex;
	align-items: center;
	padding-top: 85px!important;
	min-height: 380px;
	background-image: none;
	color: #000;
	& .hero__title {
		font-size: 4.4rem;
		text-align: left;
		font-weight: 500;
	}
}

.hero__title {
	font-size: 4rem;
	text-align: center;
}

.hero__logo {
	display: block;
	height: auto;
	width: 250px;
	margin: 0 auto;
}

.hero__image-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	& > img {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		top: 0;
		left: 0;
		opacity: 0;
    	transition: opacity 1.5s; 
		&.next {
			opacity: 1;
			z-index: 1;
		}
		&.prev {
			opacity: 1;
			z-index: 2;
		}
		&.fade-out {
			opacity: 0;
			transition: visibility 0s 0.5s, opacity 0.5s linear;
			visibility: hidden;
		}
	}
	&:not([data-slideshow]) img {
		opacity: 1;
	}
}

/* TEXT */

.link-wrapper {
	position: relative;
	font-size: var(--p-size);
	line-height: var(--p-line-height);
	font-weight: 300;
}

.link {
	position: relative;
	text-decoration: none;
	transition: var(--global-transition);
	&::after {
		content: "";
		display: block;
		position: absolute;
		bottom: -6px;
		width: 0;
		left: 0;
		height: 0.5px;
		background-color: var(--brand-color--orange);
		transition: var(--global-transition);
	}
}

.button-wrapper {
	position: relative;
	font-size: 1.1rem;
	font-weight: 300;
}

.button {
	position: relative;
	display: inline-block;
	text-decoration: none;
	border: 1px solid var(--brand-color--grey);
	background-color: var(--brand-color--white);
	padding: 0.4rem 1rem;
	border-radius: var(--brand-border-radius);
	transition: var(--global-transition);
  &.button--white {
    border: 1px solid var(--brand-color--white);
	  background-color: transparent;
  }
  &.button--large {
    padding: 1rem 1.8rem;
  }
  &.button--wide {
    text-align: center;
    width: 100%;
  }
}

/* Image Text */

.section__title {
	font-size: 1.6rem;
}

/* Slider */

.marquee-slider {
	/* width: 100%; */
}

.slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30rem;
	height: 30rem;
	padding: 3rem;
}

.slide-image {
	max-height: 100%;
	max-width: 100%;
	height: auto;
	width: auto;
}	

/* gallery */ 


.gallery__container {
	position: relative;
	display: grid;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-columns: 1fr;
	grid-auto-flow: row;
	justify-content: space-between;
	place-items: start stretch;
}


@container (min-width: 1200px) {
  .gallery__container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@container (min-width: 600px) and (max-width: 1200px) {
  .gallery__container {
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 600px) {
  .gallery__container {
    grid-template-columns: 1fr;
  }
}

.section__header.section__header--columned ~ .section__content .gallery__container {
	grid-template-columns: 1fr 1fr;
}

}