.as-landing {
  width: 100%;
  display: flex;
  padding-top: 5rem;
  min-height: 90vh;
}

.as-landing-img {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.as-landing-heading {
  font-family: "Major Mono Display", monospace;
  font-size: 5vw;
  padding-bottom: 1rem;
}

@media (min-width: 1440px) {
  .as-landing-heading {
    font-family: "Major Mono Display", monospace;
    font-size: 5rem;
    padding-bottom: 1rem;
  }
}

.as-landing-text {
  width: calc(50% - 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0rem 1rem;
}

.as-landing-p {
  line-height: 1.9rem;
  font-size: 1rem;
  font-weight: 300;
}

.as-section {
  width: 100%;
  display: flex;
}

.as-section-art {
  width: 100%;
  display: flex;
}


.as-section-left {
  width: 50%;
  font-family: "Major Mono Display", monospace;
  font-size: 4rem;
}
.as-section-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.as-section-right-row {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.as-section-right-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.as-landing-section {
  max-width: 1440px;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 120px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.a-content-section {
  max-width: 1440px;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 150px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid white;
}

.about-icon {
}

.skill-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 300;
  padding-left: 1rem;
}

.skill-title {
  font-weight: 500;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skill-text {
  opacity: 0.8;
  font-size: 14px;
}

.art-link {
    display: flex;
    gap: .5rem;
    padding: 1rem
}

.about-art-img-container{
padding: 1rem;
}
.about-art-img{
width: 100%;
}

.about-art-img-container {
  overflow: hidden;
  height: 150px; /* Adjust to your desired visible slice */
  transition: height 0.5s ease;
  position: relative;
  cursor: pointer;
}

.about-art-img {
  width: 100%;
  filter: grayscale(100%);
  transition: transform 0.5s ease, filter 0.5s ease;
  transform: translateY(-30%) scale(1); /* show vertical middle & zoom */
}

/* Hover effect */
.about-art-img-container:hover {
  height: 400px; /* expands slightly */
}

.about-art-img-container:hover .about-art-img {
  filter: grayscale(0%);
  transform: translateY(-20%) scale(1); /* zoom back and shift slightly */
}

.art-image{
    min-height: 400px;
}


.fade-slide-up-s {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-slide-up-s.visible {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 860px) {

    .as-landing{
        flex-direction: column;
        gap: 5rem;
    }

    .as-landing-img{
        width: 100%;
    }

    .as-landing-text{
        width: calc(100% - 1rem);
    }

    .as-landing-heading{
                font-size: 11vw;
    }

.as-section{
    flex-direction: column;
    gap: 5rem;
}

.as-section-right{
    width: 100%;
}

.as-section-right-row{
  flex-direction: column;
  gap: 5rem;
}
.as-section-right-col{
  width: 100%;
}

.as-section-art{
    flex-direction: column;
}

.art-image{
    min-height: 100px;
}

.about-art-img-container {
  overflow: hidden;
  height: 100px; /* Adjust to your desired visible slice */
  transition: height 0.5s ease;
  position: relative;
  cursor: pointer;
}

.about-art-img-container:hover {
  height: 100px; /* expands slightly */
}

.art-image{
    width: 100%;
}

}