[General SCSS] styling I always use in jointswp #foundation #scss

styles.scss

html {
  scroll-behavior: smooth;
}

section {
	padding: 3rem 0;
}
.grid-container {
      width: 100%;
	@media (min-width: 1500px) {
		max-width: 1394px; // for XL screens
 	 }
}

hr {
	max-width: 1394px;
}

.vertical-center {
 display: flex;
 align-items: center;
}


// if using slick slider

.slick-slide {
  padding: 1rem;
  &:focus {
    outline: none;
  }
}
// fix for IE if you're not using full width slick sliders
.slick-dots {
  left: 0;
}


//need to add -- MENU ITEMS on mobile highlight the active pages

// need to remember -- SETTINGS change pagination for mobile to TRUE


label { // need to put id # before this to override GF
      white-space: normal;
}
//Gravity forms IE fix
.gf_browser_ie.gform_wrapper .gform_footer input.button {
  padding: .85em 1em !important;
}

// fix for foundation + gravity forms select
select {
  background-position: right 1rem center;
  //padding: .5rem 2rem .5rem 1rem; this is a second option
}

.wysiwig { /* add .wysiwig to all wysiwig areas you want text underlines */
  a {
      text-decoration: underline; 
  }
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
  -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
  width: 10px;
}
::-webkit-scrollbar:horizontal {
  height: 10px !important;
}

  /* Track */
::-webkit-scrollbar-track {
  background: $very-light-gray;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: $orange;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: $blue;
}