body {
        font-family: 'EB Garamond', serif;
        font-size:25px;
        padding:70px;
      }

a {
        color: #239710;
        text-decoration: none;
        text-decoration-thickness: 2px;
}

a:hover {
        color: #997949;
        text-decoration: none;
}

h1,h2,h3,h4,h5 {
        text-align: center;
        margin:30px 0;
}

h3 span {
        font-weight: normal;
}

p {
        text-align: left;
        margin: 20px 20% 20px 20%;
        font-family: serif;
        line-height: 222%;
}

.frame {
        margin:20px 70px 0 70px;
        width:300px;
        height: 650px;
        float:left;
        position: relative;
}

/*.frame:after {
  content: '[ ]';
  position: absolute;
  left:270px;
  inset: 0;
  width: 24px;
  height: 40px;
  background: white;
  z-index: 1;
  opacity: 1;
}*/

.frame img {
        -webkit-box-shadow: 9px 9px 10px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 9px 9px 10px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 9px 9px 10px 0px rgba(0, 0, 0, 0.3);
}

.frame img:hover {
        -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);

}

.port {
        width: 60%;
        float: none;
        margin-bottom: 70px;
}

.more {
        font-size: 50%;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 5px;
        color: #807a6f;
        text-decoration: underline;
}

#mainCarousel {
  width: 800px;
  margin: 0 auto 1rem auto;

  --carousel-button-color: #170724;
  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;

  text-align: center;
}

#mainCarousel .carousel__slide {
  width: 100%;
  padding: 0;
}

#mainCarousel .carousel__button.is-prev {
  left: -1.5rem;
}

#mainCarousel .carousel__button.is-next {
  right: -1.5rem;
}

#mainCarousel .carousel__button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #A78BFA;
}

#thumbCarousel .carousel__slide {
  opacity: 0.5;
  padding: 0;
  margin: 0.25rem;
  width: 245px;
  height: 155px;
}

#thumbCarousel .carousel__slide img {
  width: 95%;
  height: 95%;
  object-fit: cover;
  border-radius: 4px;
}

#thumbCarousel .carousel__slide.is-nav-selected {
  opacity: 1;
}

@media (max-width: 1000px) { /*для мобилок*/

.port {
        width: 90%;
        }

h1,h2,h3,h4,h5 {
        font-size:200%;
}

p {
        text-align: left;
        margin: 20px 0;
        line-height: 170%;
}

.frame {
        margin:20px 50px 0 50px ;
}

.example-image {
        height: 100px;
}

}