body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.wrap {
  inline-size: min(280px, 100%);
  border: 1px solid #ccc;
  max-block-size: 480px;
  overflow: auto;
  position: relative;
  anchor-name: --wrap;
}

.hero {
  padding: 20px 40px;
}
.hero .img {
  background: #ccc;
  height: 100px;
}

.menu-icon {
  border: 0;
  background: none;
  padding: 0;
  position: fixed;
  position-anchor: --wrap;
  top: calc(anchor(top) + 20px);
  right: calc(anchor(right) + 25px);
}
.menu-icon svg {
  width: 12px;
}

.search-area {
  container-type: scroll-state;
  container-name: sticky-search;
  position: sticky;
  top: 0;
  /* Doing this in two places just to show the different syntaxes */
}
@container scroll-state(stuck: top) {
  .search-area search {
    background: #eee;
  }
}

search {
  padding: 10px 20px;
  margin: 0 0 20px 0;
  transition: 0.2s;
}
search input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 15px;
  transition: width 0.2s;
}
@container sticky-search scroll-state(stuck: top) {
  search {
    padding: 10px;
  }
  search input {
    width: calc(100% - 20px);
  }
}

main {
  padding: 0 20px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
main div {
  background: #ccc;
  height: 60px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}