:root {
  --side-pad: clamp(16px, 6vw, 20vw);
  --top-pad: 40px;
}

header img {
  width: 500px; 
  height: auto; 
  padding-top: 20px;
}

.works,
footer {
  padding: var(--top-pad) var(--side-pad) 0;
}

.project-feed {
  width: 100%;
  padding: 50px 0px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.feed-title {
  padding-top: 50px;
  text-align: center; 
}

.feed-item {
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0px;
  transition: border-radius 200ms ease, opacity 200ms ease;

  aspect-ratio: 2 / 1;
}

.feed-item img,
.feed-item video {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;

  object-fit: cover; 
  object-position: center;

  transition: filter 200ms ease, transform 200ms ease;
}

.feed-meta {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center; 
  text-align: center;

  gap: 5px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 200ms ease;
}

.feed-meta h3 {
  font-family: "Gotham Medium", sans-serif;
  font-size: large;
  padding: 0;
  text-transform: uppercase;
  color: #fff;
}

.feed-meta h4 {
  font-family: "Gotham Book", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
}

.feed-item:hover {
  border-radius: 10px;
}

.feed-item:hover .feed-meta {
  opacity: 1;
}

.feed-item:hover img,
.feed-item:hover video {
  filter: brightness(0.75) saturate(0.85);
}


@media (max-width: 1000px) {
  :root {
    --side-pad: 5vw;
    --top-pad: 30px;
  }

  footer {
    padding-bottom: 20px;
  }

  .fixed-block {
    font-size: smaller; 
  }

  .project-feed {
    grid-template-columns: 1fr;
    gap: 18px;

    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  header img {
    width: 100%; 
    height: auto; 
  }
}

@media (max-width: 825px) {
  .fixed-block {
    white-space: normal;
  }
}