@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

.principal {
    background-image: url("/media/site/knaresborough-photo-canva-2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 450px;
}


body {
    font-family: "Josefin Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

figure {
    display: inline-block;
    margin: 50px;
}
figcaption {
    font-size: x-large;
    padding: 10px;

}

/*
Bold Blue  =   #032789
Pale Blush =   #FDE3E4
Minty Blue =   #C7F3F3
Plaster Pink = #F78C7A
*/

/* ------ Header ------ */

.portal-banner {
    display: None;
}

/* ------ Navigation ------ */

/* Bold Blue */
.plone-navbar {
    background-color: #032789;
}

.plone-nav li {
    background-color: #032789;
}

/* ------ Portlets ------ */

/* Plaster Pink
.portlet .portletHeader {
    background-color: #F78C7A;
}
*/

/* Pale Blush
.portlet .portletContent {
    background-color: #FDE3E4;
}
*/

/* ------ Footer ------ */

/* Footer Background Plaster Pink */
#portal-footer-wrapper {
    background-color: #F78C7A;
}

/* Footer Text - Bold Blue */
#portal-footer-wrapper {
    color: #032789;
}

/* Footer Links - Minty Blue */
#portal-footer-wrapper a {
    color: #C7F3F3;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
  border-style: outset;
  /* max-width: 200px; */
}

.card img {
  /*object-fit: cover; */
  / *width: 100%; */
  / *height: 100%; */
  padding: 10px;
}

.card header{
    background-color: #F78C7A;
    padding: 5px;
    font-size: 125%;
} 

.card .content{
    padding: 5px;
    overflow: auto;

} 

.card footer{
    background-color: #FDE3E4;
    padding: 5px;

} 

.mosaic-tile {
    margin: 10px;
}

.solo-card {
  /* display: grid; */
  /* grid-template-rows: max-content 200px 1fr; */
  border-style: outset;
  /* max-width: 200px; */
}

.solo-card header{
    background-color: #F78C7A;
    padding: 5px;
    font-size: 125%;
} 

.solo-card .content{
    padding: 5px;
    overflow: auto;

} 

.solo-card footer{
    background-color: #FDE3E4;
    padding: 5px;

}