.fade-in {  opacity: 0;}
.appear {  opacity: 1;  transition: opacity 2s ease-in;}
.skills-box {  display: grid;  grid-template-rows: 5rem 1fr;  gap: 2rem 0;  padding: 2.4rem;  border-radius: 5px;  background-color: rgba($white, .8);  text-align: center;  box-shadow: $shadow-middle;
  &__no-shadow {    box-shadow: none;  }
  @media only screen and (max-width: $bp-laptop) {    grid-template-rows: 5rem 1fr;    gap: .5rem 0;    padding: 1.6rem;  }
  @media only screen and (max-width: $bp-tablet) {    grid-template-rows: 4rem min-content;    padding: 1.6rem;  }
  &__header-icon {    height: 3.5rem;    width: 3.5rem;    margin-right: 5px;    fill: $navy-2;    vertical-align: bottom;  }
  &__header {    @include home-sub-header-formatting;    display: flex;    justify-content: center;    align-items: center;    padding-bottom: 1.2rem;  }
  &__list {    display: grid;    gap: 4rem 0;    padding: 2rem 0;    border-radius: 5px;    list-style: none;    background-color: $grey-1;
    @media only screen and (max-width: $bp-laptop) {      grid-template-rows: 2rem;      grid-template-columns: repeat(3, min-content);      justify-content: center;      gap: 2.4rem .8rem;      padding: 3.2rem .8rem;    }
    // Adjust the number of columns as you gain more skills    @media only screen and (max-width: $bp-tablet){      grid-template-columns: min-content;      display: flex;      flex-wrap: wrap;      padding: 2.4rem .8rem;    }
    @media only screen and (max-width: $bp-mobile-m){      padding: .8rem .8rem;    }
  }
  &__item {    display: flex;    align-items: center;    justify-content: center;  }
  &__icon {    height: 5rem;    width: 5rem;    margin: 0 1rem;
    @media only screen and (max-width: $bp-tablet) {        height: 3.5rem;        width: 3.5rem;      }  }
}