{% include "header" %}
{% include "sub_navigation" %}

<main class="communication-page">
    <div class="information-wrapper">
        <div class="heading">Resource Library</div>
        <div class="info info-resource">
            <div class="info-text">
                <div class="bold-heading info-heading text-center">Welcome to the Resource Library! Explore the sections below to find product specific training courses and resources.</div>
                <div class="content"></div>
            </div>
        </div>
    </div>
    <div class="information-wrapper">
        <div class="information-container">
            <a class="info info-connected" href="/app/pear-deck">
                <img class="icon-image" src="https://s3.amazonaws.com/static.northpass.com/Educator's+Hub/communication-page/pear.png" alt="">
                <div class="info-text info-text-connected">
                     <div class="bold-heading  info-heading text-center">Pear Deck</div>
                     <div class="content"></div>
                </div>
            </a>
            <a class="info info-connected" href="/app/goguardian">
                <img class="icon-image" src="https://s3.amazonaws.com/static.northpass.com/Educator's+Hub/communication-page/goguardian.png" alt="">
                <div class="info-text info-text-connected">
                     <div class="bold-heading  info-heading text-center">GoGuardian</div>
                     <div class="content"></div>
                </div>
            </a>
            <a class="info info-connected" href="/app/edulastic">
                <img class="icon-image" src="https://s3.amazonaws.com/static.northpass.com/Educator's+Hub/communication-page/edulastic.png" alt="">
                <div class="info-text info-text-connected">
                    <div class="bold-heading info-heading text-center">Edulastic</div>
                    <div class="content"></div>
                </div>
            </a>
        </div>
    </div>
    {% comment %} <div class="heading">General News</div>
    <div class="content text-center">Want to be in the know about everything Pear Deck, GoGuardian, or Edulastic? Sign up for the general newsletter to get your name on the list. </div>
        <div class="sub-container">
            <div class="subscribe">
                <div class="bold-heading sub-heading">Subscribe to Pear Deck news</div>
                <div class="sub-link-container">
                    <a class="communication-link sub-link" href="https://www.peardeck.com/newsletter">Subscribe</a>
                </div>
            </div>
            <div class="subscribe">
                <div class="bold-heading sub-heading">Subscribe to GoGuardian news</div>
                <div class="sub-link-container">
                    <a class="communication-link sub-link" href="https://www.goguardian.com/newsletter">Subscribe</a>
                </div>
            </div>
            <div class="subscribe">
                <div class="bold-heading sub-heading">Subscribe to Edulastic news</div>
                <div class="sub-link-container">
                    <a class="communication-link sub-link" href="https://edulastic.com/newsletter/">Subscribe</a>
                </div>
            </div>
        </div> {% endcomment %}
</main>
{% include "footer" %}

<style>
.info-text-connected {
    margin: 1rem;
}
.text-center {
    text-align: center;
}
.communication-page {
    margin: 20px 4%;
}
.communicaton-heading {
    background: #0c65b8;
    color: #fff;
    font-weight: bold;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    text-align: center;
}
.bold-heading {
    font-weight: bold;
    color: #000;
}
.content-block, .info {
  margin: 1rem 0;
}
.content-block br {
    margin: 3px;
}
.info {
    display: flex;
    max-width: 1000px;
    background: #fff;
padding: 1.5rem;
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.info-connected {
    max-width: 300px;
    margin: 1rem;
    text-decoration: none;
    transition: transform .2s
}
.info-connected:hover {
    transform: scale(1.20);
}
.info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.advocacy {
display: flex;
  flex-direction: column;
  align-items: center;
}
.advocacy-content-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 0px;
}
@media only screen and (max-width: 1040px) {
    .advocacy-content-wrapper {
        grid-template-columns: repeat(2, 1fr); 
    }
}
@media only screen and (max-width: 740px) {
    .advocacy-content-wrapper {
        grid-template-columns: repeat(1, 1fr); 
    }
}
.info-resource {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.content-block {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.team-member {
    font-weight: bold;
    margin-bottom: 5px;
}
.information-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-heading {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}
.subscribe {
  background: #fff;
  margin: 1rem 0;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.sub-heading {
    margin-bottom: 1.5rem;
}
.sub-link {
    background: #0c65b8;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.85rem; 
}
.sub-link-container {
  display: flex;
  justify-content: center;
}
.sub-container {
    display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
gap: 15px;
margin-bottom: 2rem;
}
.heading {
    text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #000;
margin: 1rem 0;
}
.information-container {
    display: flex;
  }

.advocacy-member {
    display: flex;
    background: #fff;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin: 10px;
    align-items: center;
}
.icon-image {
  padding: 1rem;
  max-width: 150px;
}

</style>