.guides__list {
    width: 100%;
	margin-top: 3rem;
    display: flex;
    flex-direction: row ;
	flex-wrap: wrap;
    gap: 2rem;

	.display-3 {
	  text-align: center;
	  margin-bottom: 10px;
	  color: $black;
	}
	.lead-text {
	  text-align: center;
	  font-size: 18px;
	  margin-bottom: 40px;
	}
	.guide-card {
	  padding: 20px;
	  border: 1px solid $gray-light;
	  border-radius: 6px;
	  max-width: 360px;
	  display: flex;
	  flex-direction: column;
	  min-height: 300px;
      transition: border-color .15s ease-out, box-shadow .15s ease-out,transform .15s ease-out,opacity .15s ease-out;

      a {
        &:hover {
          text-decoration: none;
        }
      }

      &:hover {
        box-shadow: 0px 1px 2px rgba(2,8,20,.06),0px 2px 8px rgba(2,8,20,.08);
		border-color: $blue;
        text-decoration: none;
      }
	  .guide-info {
		  display: flex;
		  flex-direction: column;

	  	h2 {
	  	  font-size: 20px;
	  	  line-height: 24px;
	  	  letter-spacing: -1px;
	  	  margin-bottom: 10px;
	  	  color: $black;

	  	  a {
	  	    color: $black;
	  	  }

	  	  a:hover {
	  	    text-decoration-color: $black;
	  	  }
	  	}
	  	p {
	  	  margin-bottom: 0;
			-webkit-line-clamp: 3;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			font-size: 14px;
	  	}
	  }
	}
	@include media-breakpoint-down(xs) {
		.display-3 {
		  font-size: 32px;
		  line-height: 39px;
		}
		.lead-text {
			font-size: 14px;
		}
		.guide-card {
		  .guide-info {
		  	h2 {
		  		font-size: 18px;
		  	}
		  	p {
		  		font-size: 14px;
		  	}
		  }
		  .write-info {
		  	.cta-link {
				margin-top: 5px;
				width: 100%;
		  }
	  	}
		}
	}
}
.guides-header {
	margin-bottom: 2rem;
}

.guides-page{
	width: 90%;
}

.guide-tag {
	border: 1px solid #0075ff;
	background-color: #0075ff;
	padding:5px 10px;
	border-radius:4px;
	margin-bottom:16px;
	width: fit-content;
	color: #fff;
	font-size: 14px;
	a {
		color: #fff;
		font-size: 14px;
	}
}

.guides {
	$toc-width: 14rem;
	margin-top: 50px;
	max-width: 90rem;
	&__label {
	  width: 150px;
	  height: 30px;
	  padding: 5px 0;
	  margin-bottom: 15px;
	  font-size: 16px;
	  font-weight: 600;
	  line-height: 20px;
	  background-color: #0075ff;
	  color: #fff;
	  text-align: center;
	  text-transform: uppercase;
		background: #0075ff;
		border-radius: 3px;
		a {
			color: #fff;
		}
	}
	&__title {
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -0.04em;
  }
  &__description {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
	aside nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
  }
	.mobile-toc-button {
		display: none;
	}
	.markdown {
	  h2 {
	    font-size: 32px;
	    line-height: 39px;
	    border-bottom: 0;
	    margin-top: 50px;
	  }
	  h3 {
	    font-size: 20px;
	    line-height: 30px;
	    color: $gray-darkish;
	    margin-bottom: 10px;
	  }
	  p {
	    img {
	      margin: 30px 0;
	      border: 1px solid $gray-light;
	    }
	  }
	  figure {
	    margin: 0 0 1rem;

	    figcaption {
	      h4 {
	        font-size: 12px;
	        line-height: 20px;
	        font-weight: normal;
	        margin-top: 10px;
	        text-align: center;
	        text-transform: uppercase;
	        color: $gray-darkish;
	      }
	    }
	  }
	  .markdown-tabs {
	  	.markdown-tabs-content {
	  		padding: 0;
	  	}
	  }
	}
	.free-trial-section {
	  padding-top: 100px;
	}

	@include media-breakpoint-down(md) {
		.guides-toc {
    	 display: none;
    }
    .guides-toc-mobile {
      display: block;
    }
		&__title {
			font-size: 32px;
		}
		nav#TableOfContents {
      ul {
        border-left: 2px solid $blue;
        padding-left: .5rem;
				list-style: none;
      }

      li > ul {
        display: none;
      }
    }
		&-page {
			padding: 0px !important;
			width: 90%;
		}
	}
	&-toc {
		position: relative;
		font-size: .875rem;
		width: 232px;
		padding-top: 8rem;
    flex: 0 0 $toc-width;

		nav {
      width: $toc-width;
      padding: 1rem 0 1rem 0;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: auto
    }

    nav#TableOfContents {
		// hacky way to hide 3rd level heading in little page TOC because Hugo does not allow filtering the TOC by level
		ul ul {
			display: none;
		}
      ul {
        border-left: 2px solid $blue;
        padding-left: .5rem;

        ul {
          padding-left: 0.75rem;
        }

        li {
          a {
            color: $blue;
            display: block;
            padding-block: 5px;
          }
        }
      }
    }

		nav ul ul {
      padding-left: 1rem;
      border-left: none !important;
    }

		&-header {
      color: $gray-dark;
      font-weight: 600;
    }
		&-mobile {
      display: none;
      .learn-toc-header {
        top: 0;
        position: relative;
        padding-top: 0;
      }
    }
	}
	.cards-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 40px;

		.text-wrap {
			width: calc(100% - 58px);

			h2 {
				margin: 3px 0;
				color: #0075ff;
			}

			h3 {
				margin: 2px 0;
				font-size: 20px;
				line-height: 30px;
			}

			p {
				font-size: 14px;
				line-height: 20px;
			}
		}

		.three-column-card {
			width: calc((100% - 50px)/3);
			display: flex;
			justify-content: space-between;
			border: 1px solid $gray-light;
			padding: 20px;
			border-radius: 6px;
			&:hover {
				text-decoration: none;
			}

			.text-wrap {
				width: 100%;
				h3 {
					font-size: 16px;
					line-height: 24px;
				}
			}
		}
	}
	&-page {
    min-width: 20rem;
    flex-grow: 1;
    padding: 1rem 0;
    margin-left: 0;
    margin-right: 0;

    .markdown {
      padding-right: 30px;

      .breadcrumb {
        background: $white;
        padding: 0;

        a {
          color: $gray;
        }
      }

      .mobile-toc-button {
        display: none;
      }

      .search {
        margin-bottom: 30px;
      }
    }

    .form-inline {
      width: 100%;
      position: relative;

      span {
        width: 100%;
        max-width: 2000px;
        height: 100%;
      }
      img {
        position: absolute;
        top: 11px;
        left: 10px;
      }
      input {
       width: 100%;
       height: 100%;
       background: none;
       border: 1px solid $gray-light;
       padding-left: 30px;
      }
    }
  }
}

.guides__container {
	width: 900px;
	min-width: 20rem;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.guides__write-info {
	margin-top: auto;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 20px;
	color: $gray-darkish;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;

	.cta-link {
		font-size: 14px;
		line-height: 20px;
		float: right;
	}

	img {
		border-radius: 50%;
		overflow: hidden;
		margin-right: 5px;
	}
}


.guides__back {
	margin-bottom: 2rem;
}
