/**************************/
/* ABOUT SECTION */
/**************************/
.about-container {
  max-width: 150rem;
  padding: 8rem 3.2rem;
  margin: 0 auto;
  background-color: #fff;
}

/* In media Queries padding is:
padding: 6rem 3.2rem; at max-width: 75rem
padding: 4rem 3.2rem; at max-width: 59rem 
*/

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
}
/* In media Queries grid-gap is:
 grid-gap: 4rem at max-width: 59rem
 grid-gap: 2rem at max-width: 34rem */

/* TEXT */

@media only screen and (min-width: 398px) {
.text-box {
  padding-left: 5rem;
}

}
.text-box .heading-secondary {
  margin-top: 2rem;
  margin-bottom: 2rem;
  
  padding-right: 8rem;
}

.scroll-text {
  margin-bottom: 4rem;
  color: #767676;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
}

/* In media Queries text-box padding-right is:
padding-right: 4rem; at max-width: 88rem
padding-right: 0; at max-width: 59rem
*/

.text-container {
  padding-right: 2rem;
  max-height: 44rem;
  overflow-y: scroll;
  transition: all 0.3s;
}

@media only screen and (min-width: 398px) {
.text-container {
  padding-right: 5rem;
}}


/* **** */
.text-container::-webkit-scrollbar {
  width: 8px;
}

.text-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.text-container::-webkit-scrollbar-thumb {
  background: #9a9a9c;
}

.text-container::-webkit-scrollbar-thumb:hover {
  background: #767676;
}
/* **** */

.about-text {
  line-height: 2;
  letter-spacing: 1px;
}

.about-text:not(:last-child) {
  margin-bottom: 2rem;
}

/* IMAGE */
.about-content .right-image {
  overflow: hidden;
}

.right-image {
  display: flex;
  justify-content: center;
}

.right-image picture img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 0.1rem;
}


/* Instagram Link */

.about-link:link,
.about-link:visited {
  color: #333;
  transition: all 0.3s;
}

.about-link:hover,
.about-link:active {
  color: #767676;
}