@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
:root {
  --shoko: #945745;
  --dark-creme: rgb(225 178 165);
  --rose: #fbcfbd;
  --dark-rose: #f08080;
  --cherry: #711414;
  --white: #ffffff;
  --bl: #c6dfe3bf;
  --grey: #f8f8f8;
  --box-shadow: 4px 4px 30px rgb(0 0 0 / 10%);
  --text-shadow: 4px 8px 8px rgba(0, 0, 0, 0.5);
  --gap: 4px;
  --duration-shrink: .5s;
  --duration-expand: .25s;
  --no-duration: 0s;

}

/*основной шрифт*/
/*font-family: 'Tenor Sans', sans-serif;*/
/*латинский для заголовка*/
/*font-family: 'Parisienne', cursive;*/
/*кирилица для заголовка*/
/*font-family: 'Lobster', cursive;*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 400;
}

/*body {
  margin: 0;
  background-color: var(--rose);
}*/

main {
  width: 1200px;
  margin: 0 auto;
  max-width: 100vw;
  position: relative;
}



p {
  font-family: "Tenor Sans", sans-serif;
  color: var(--shoko);
}

ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: var(--gap);
  list-style: none;
  padding: 0;
  /*margin: 1rem;*/
}

@media screen and (min-width: 640px) {
  ul {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
  }
  .nachinki {
    grid-auto-rows: 700px;
  }
}
li {
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: var(--duration-expand);
}

li.is-zoomed {
  transition-duration: var(--duration-shrink);
}

.is-zoomed li:not(.is-zoomed) {
  opacity: 0.3;
}
.nachinki>li>button {
  height: 100%;
}

button {
  all: initial;
  display: block;
  aspect-ratio: 2/2;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
}

button:focus {
  outline: none;
}

/*li.is-zoomed button,
ul:not(.is-zoomed) button:focus {
  outline: 2px solid rgb(187, 118, 118);
  outline-offset: 1px;
}
*/
button>img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.visually-hidden {
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(1px);
          clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

@media (prefers-reduced-motion) {
  li,
  li.is-zoomed {
    transition-duration: var(--no-duration);
  }
}/*# sourceMappingURL=style.css.map */