/* @achievements */
$space-at-top: 100px;

.achievements {
  background-color: $regal-blue;
  color: $white;  

  @media (min-width: $large-screen) {
    @include poly-padding-x--large;
  }

  &__inner {
  	height: auto;

  	@media (min-width: $medium-screen) {
  	  
  	  @include poly-padding;
  	  
  	  max-width: 1280px;
  	  position: relative;
  	  display: inline-block;
  	  display: grid;
      grid-template-columns: 60% 40%;
      // grid-template-rows: 1fr 1fr;
    }

    @media (min-width: $large-screen) {
      @include poly-padding--large;
    }
    
    
  }

  &__map {
    right: 0;
    position: relative;
    display: block;
    top: -50px;

  	@media (min-width: $medium-screen) {
  	  // display: grid;
  	  grid-column:1;
  	  grid-row: 2;
    }
  }

  &__intro {
  	@media (min-width: $medium-screen) {
  	  grid-column:1;
      grid-row: 1;
    }

  	.card-header-text {
      padding-bottom: 2rem;
      .card-header-text__heading, 
      .card-header-text__content {
      	color: $white;
      }
  	}
  }

  &__grid-and-cta {
  	color: $white;
    display: flex;
    flex-direction: column;
  	margin: 0px 30px;
  	
  	@media (min-width: $medium-screen) {
      grid-row: 2;
      grid-column: 2;
  	  margin: 50px 0 0 30px;
    }
  }

  &__grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;


  	@media (min-width: $medium-screen) {
  	  @include poly-margin-x--small;

  	  width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;

      .achievements__pod {
        &:nth-child(2) {
          grid-row: 1;
          grid-column: 2;
        }

        &:nth-child(3) {
          grid-row: 2;
          grid-column: 1;
        }

        &:nth-child(4) {
          grid-row: 2;
          grid-column: 2;
        }
      }
    }
  }

  &__pod {
  	flex-wrap: wrap;
    padding-bottom: 30px;
    
    @media (max-width: #{$medium-screen - 1}) {
      text-align: center;

      > div {
        text-align: center;
      }
    }

    // &:hover {
    //   .achievements__number {
    //     color: $soft-blue;
    //   }
    // }

  	@media (min-width: $medium-screen) {
  		
  	  @include poly-margin--small;
  	  
  	  // width: 200px;

  	  &:nth-child(-n+2) {
  	  	margin-top: 0;
  	  }

  	  &:nth-child(odd) {
  	  	margin-right: 20px;
  	  }
  	}
  }

  &__label {
  	color: $white;
  	display: block;
  	font-size: 14px;
  	text-align: left;
    padding-top: 5px;
    letter-spacing: 1px;
    line-height: 28px;

  	@media (min-width: $medium-screen) {
      padding-top: 0;
    }
  }

  &__number {
  	color: $white;
  	display: block;
  	font-size: $font-50px;
    line-height: 52.6px;
    font-family: 'Biryani', sans-serif;
    font-weight: $font-superbold;
    text-align: left;

    @media (min-width: $medium-screen) {
    }
  }

  &__button {
  	margin: 20px 0 80px 0;
  	text-align: left;

  	@media (min-width: $medium-screen) {
  	  
  	  @include poly-margin-x--small;
    }

      .cta {
        margin: 0 auto;
        position: relative;
        display: block;
        max-width: 233px;

        @media (min-width: $medium-screen) {
          margin: unset;
        }
      }
  }

  // &__vert-title {

  // 	@media (min-width: $small-screen) {
  // 	  display: none;
  // 	  position: absolute;
  // 	  top: 0;
  //     right: 68px;
  //   }

  //   @media (min-width: $medium-screen) {
  // 	  display: none;
  //   }
    
  //   @media (min-width: $large-screen) {
  //     display: block;
  //   }
    
  //   .vertical-section-title {
  // 	  .vertical-section-title--inner {
  // 	    display: none;

  //   		@media (min-width: $large-screen) {
  //   	    width: 400px;
  //   		  -webkit-transform-origin: 4% 60%;
  //   	    transform-origin: 4% 60%;
  //   	    display: block;
  //   		}
  // 	  }
  //   }
  // }
}