@font-face { font-family: Chalkboard; src: url('../fonts/Chalkboard.ttc'); }
@font-face { font-family: Lora;
src: url('fonts/Lora-VariableFont_wght.ttf'); }

.header a:link{color: #dfd1e6; text-decoration:none;}
.header a:visited{color: #dfd1e6; text-decoration:none;}
.header a:hover {background-color:#49464a ; text-decoration:none;}


/* Mobile */

body {
    
    background-color: #825d8b;
    
    display: grid;
    grid-template-columns: 0% auto 0%;
    
}

.grid-container {
    
    grid-column: 2/3;
    
    display: grid;
    grid-template-rows: 14vh auto auto;
    
    border-style: solid;
    border-width: 1.5px;

}


.grid-container .logo{
    grid-column: 1/-1;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;

    border-style: solid;
    border-width: 0px;


    
    
    display: grid;
    grid-template-rows: 74.5% 25.5%;
    
    overflow: hidden;

}

.logo .top-flower{
    background-image: url("../Pictures/logo.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
    grid-row: 1/2;
}

.logo .name{
    font-family: Lora;
    font-size: 19;
    padding-top: .2vh;
    background-color: #C1BDC3;
    
    -webkit-transform:scale(1.2,1);
    
    
    grid-row: 2/3;
}


.grid-container .header {
    grid-column: 1/-1;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    padding: 7px;

    align-items: center;

    Font-size: 14;
    font-family: chalkboard;
    
    display: grid;
    grid-template-columns: 4fr 6fr 4fr 4fr 4fr; 
    grid-template-rows: 1fr;
  
    Background-color: #000000;
    border-style: solid;
    border-width: 0px;
}

.header .headerHome {
    grid-column: 1 / 2;
    grid-row-start: 1;
    grid-row-end: 1;   
  


}
.header .headerPage1 {
    grid-column: 2 / 3;
    grid-row-start: 1;
    grid-row-end: 1;


}
.header .headerOrder {
    grid-column: 3 / 4;
    grid-row-start: 1;
    grid-row-end: 1;

}
.header .headerFAQs {
    grid-column: 4 / 5;
    grid-row-start: 1;
    grid-row-end: 1;

}
.header .headerContact {
    grid-column: 5 / 6;
    grid-row-start: 1;
    grid-row-end: 1;

}

.grid-container .menu{
    background-color: ghostwhite;
    text-align: center;
    align-items: center;
    
        
    grid-row: 3/4;
    
    color: black;
    
    padding-bottom: 0px;

    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    
    align-self: center;
    overflow: hidden;
    
}


.menu a:link{color: black; text-decoration:underline;}
.menu a:visited{color: black; text-decoration:none;}
.menu a:hover {background-color:lightcyan; text-decoration: underline;}

.menu a{
    
    padding: 3px;
    
}


.grid-container .main {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 4;
    grid-row-end: 5;
    text-align: center;

    display: grid; 
    grid-template-columns: 100%;
    grid-template-rows: minmax(500px, auto) auto;
    
    overflow: hidden;
    

    background-image: url("../Pictures/background2.jpg");
    background-color: #cccccc;
    background-repeat: repeat;
  
    border-style: solid;
    border-width: 0px;
 
}


.main .content{
    
    grid-row: 1/2;
    
    
    
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    
    grid-template-columns: 100%;

    
    align-items: center;
    overflow: hidden;
    
}



.content img{
    
    border-width: 2px;
    border-style: solid;
    border-color: blue;
    
    
}

.content .bracelets{
    
    grid-row: 1/2;
    
    display: grid;
    
    grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];
    
    grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;
    
    align-items: center;
    
    border-style: solid;
    border-width: 1px 0px;
    
}


.tall-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.square-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.side-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.bracelets .title{
    
    grid-row: header-start/header-end;
    grid-column: pic1-start/pic2-end;
    background-color: aliceblue;
    align-self: baseline;
    padding: 5px 2px;
    width: 100%;

}

.title .category{
    
    font-weight: bold;
    font-size: 18;
    
}

.title .categoryabbreviation{
    font-size: 18;
    
}

.bracelets .pic1{
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    padding-top: 10px;
}
.bracelets .cap1{
    grid-row: cap1-start/cap1-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic2{
    grid-row: pic2-start/pic2-end;
    grid-column: pic2-start/pic2-end;
    padding-top: 10px;
}
.bracelets .cap2{
    grid-row: cap2-start/cap2-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic3{
    grid-row: pic3-start/pic3-end;
    grid-column: pic1-start/pic1-end;
}
.bracelets .cap3{
    grid-row: cap3-start/cap3-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic4{
    grid-row: pic4-start/pic4-end;
    grid-column: pic2-start/pic2-end; 
}
.bracelets .cap4{
    grid-row: cap4-start/cap4-end;
    grid-column: pic2-start/pic2-end; 
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic5{
    grid-row: pic5-start/pic5-end;
    grid-column: pic1-start/pic1-end; 
}
.bracelets .cap5{
    grid-row: cap5-start/cap5-end;
    grid-column: pic1-start/pic1-end; 
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic6{
    grid-row: pic6-start/pic6-end;
    grid-column: pic2-start/pic2-end; 
}
.bracelets .cap6{
    grid-row: cap6-start/cap6-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic7{
    grid-row: pic7-start/pic7-end;
    grid-column: pic1-start/pic1-end; 
}
.bracelets .cap7{
    grid-row: cap7-start/cap7-end;
    grid-column: pic1-start/pic1-end; 
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic8{
    grid-row: pic8-start/pic8-end;
    grid-column: pic2-start/pic2-end; 
}
.bracelets .cap8{
    grid-row: cap8-start/cap8-end;
    grid-column: pic2-start/pic2-end;   
    align-self: baseline;
    padding-top: 2px;
}
.bracelets .pic9{
    grid-row: pic9-start/pic9-end;
    grid-column: pic1-start/pic1-end; 
}
.bracelets .cap9{
    grid-row: cap9-start/cap9-end;
    grid-column: pic1-start/pic1-end;   
    align-self: baseline;
    padding-top: 2px;
}








.content .earrings{
    
    grid-row: 2/3;
    
    display: grid;
    
    grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];
    
    grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;
    
    
    align-items: center;
    
    border-style: solid;
    border-width: 1px 0px;
    
}

.earrings img{
    
}

.earrings .title{
    
    grid-row: header-start/header-end;
    grid-column: pic1-start/pic2-end;
    background-color: aliceblue;
    align-self: baseline;
    padding: 5px 2px;
    width: 100%;

}

.earrings .patriots-header{
    
    grid-row: patriots-header-start/patriots-header-end;
    grid-column: pic1-start/pic2-end;
    
    text-decoration: underline; 
}
.earrings .bruins-header{
    
    grid-row: bruins-header-start/bruins-header-end;
    grid-column: pic1-start/pic2-end;
    
    text-decoration: underline; 
}

.earrings .redsox-header{
    
    grid-row: redsox-header-start/redsox-header-end;
    grid-column: pic1-start/pic2-end;
    
    text-decoration: underline; 
}

.earrings .celtics-header{
    
    grid-row: celtics-header-start/celtics-header-end;
    grid-column: pic1-start/pic2-end;
    
    text-decoration: underline; 
}


.earrings .pic1{
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    max-height: 93%;
    max-width:90%;

    
}
.earrings .cap1{
    grid-row: cap1-start/cap1-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic2{
    grid-row: pic2-start/pic2-end;
    grid-column: pic2-start/pic2-end;
}
.earrings .cap2{
    grid-row: cap2-start/cap2-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic3{
    grid-row: pic3-start/pic3-end;
    grid-column: pic1-start/pic1-end;
}
.earrings .cap3{
    grid-row: cap3-start/cap3-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic4{
    grid-row: pic4-start/pic4-end;
    grid-column: pic2-start/pic2-end; 
}
.earrings .cap4{
    grid-row: cap4-start/cap4-end;
    grid-column: pic2-start/pic2-end; 
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic5{
    grid-row: pic5-start/pic5-end;
    grid-column: pic1-start/pic1-end; 
}
.earrings .cap5{
    grid-row: cap5-start/cap5-end;
    grid-column: pic1-start/pic1-end; 
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic6{
    grid-row: pic6-start/pic6-end;
    grid-column: pic2-start/pic2-end; 
}
.earrings .cap6{
    grid-row: cap6-start/cap6-end;
    grid-column: pic2-start/pic2-end; 
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic7{
    grid-row: pic7-start/pic7-end;
    grid-column: pic1-start/pic1-end; 
    padding-top: 14px;
}
.earrings .cap7{
    grid-row: cap7-start/cap7-end;
    grid-column: pic1-start/pic1-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic8{
    grid-row: pic8-start/pic8-end;
    grid-column: pic2-start/pic2-end;
    padding-top: 14px;
}
.earrings .cap8{
    grid-row: cap8-start/cap8-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic9{
    grid-row: pic9-start/pic9-end;
    grid-column: pic1-start/pic1-end; 
    max-height: 100%;
    
}
.earrings .cap9{
    grid-row: cap9-start/cap9-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}

.earrings .pic10{
    grid-row: pic10-start/pic10-end;
    grid-column: pic2-start/pic2-end; 
    max-height: 100%;
    
}
.earrings .cap10{
    grid-row: cap10-start/cap10-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}


.earrings .pic11{
    grid-row: pic11-start/pic11-end;
    grid-column: pic1-start/pic1-end; 
    padding-top: 14px;
    max-height: 100%;
    max-width: 90%;
}
.earrings .cap11{
    grid-row: cap11-start/cap11-end;
    grid-column: pic1-start/pic1-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic12{
    grid-row: pic12-start/pic12-end;
    grid-column: pic2-start/pic2-end;
    padding-top: 14px;
    max-height: 100%;
    max-width: 90%;
}
.earrings .cap12{
    grid-row: cap12-start/cap12-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic13{
    grid-row: pic13-start/pic13-end;
    grid-column: pic1-start/pic1-end; 
    max-height: 100%;
}
.earrings .cap13{
    grid-row: cap13-start/cap13-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}

.earrings .pic14{
    grid-row: pic14-start/pic14-end;
    grid-column: pic2-start/pic2-end; 
    max-height: 100%;
    
}
.earrings .cap14{
    grid-row: cap14-start/cap14-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}

.earrings .pic15{
    grid-row: pic15-start/pic15-end;
    grid-column: pic1-start/pic1-end; 
    max-height: 100%;
    max-width: 100%;
}
.earrings .cap15{
    grid-row: cap15-start/cap15-end;
    grid-column: pic1-start/pic1-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic16{
    grid-row: pic16-start/pic16-end;
    grid-column: pic2-start/pic2-end;
    max-height: 100%;
    max-width: 100%;
}
.earrings .cap16{
    grid-row: cap16-start/cap16-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic17{
    grid-row: pic17-start/pic17-end;
    grid-column: pic1-start/pic1-end; 
    max-height: 100%;
}
.earrings .cap17{
    grid-row: cap17-start/cap17-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.earrings .pic18{
    grid-row: pic18-start/pic18-end;
    grid-column: pic2-start/pic2-end; 
    max-height: 100%;
}
.earrings .cap18{
    grid-row: cap18-start/cap18-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}





br {
    line-height: 6px;
 }






.content .necklaces{
    
    grid-row: 3/4;
    
    display: grid;
    
    grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];
    
    grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;
    
    align-items: center;
    
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    
}

.necklaces .title{
    
    grid-row: header-start/header-end;
    grid-column: pic1-start/pic2-end;
    background-color: aliceblue;
    align-self: baseline;
    padding: 5px 2px;
    width: 100%;

}

.necklaces .pic1{
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    padding-top: 10px;
}
.necklaces .cap1{
    grid-row: cap1-start/cap1-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.necklaces .pic2{
    grid-row: pic2-start/pic2-end;
    grid-column: pic2-start/pic2-end;
    padding-top: 10px;
}
.necklaces .cap2{
    grid-row: cap2-start/cap2-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}
.necklaces .pic3{
    grid-row: pic3-start/pic3-end;
    grid-column: pic1-start/pic1-end;
}
.necklaces .cap3{
    grid-row: cap3-start/cap3-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.necklaces .pic4{
    grid-row: pic4-start/pic4-end;
    grid-column: pic2-start/pic2-end; 
}
.necklaces .cap4{
    grid-row: cap4-start/cap4-end;
    grid-column: pic2-start/pic2-end; 
    align-self: baseline;
    padding-top: 2px;
}
.necklaces .pic5{
    grid-row: pic5-start/pic5-end;
    grid-column: pic1-start/pic1-end; 
    padding-top: 30px;
}
.necklaces .cap5{
    grid-row: cap5-start/cap5-end;
    grid-column: pic1-start/pic1-end; 
    align-self: baseline;
    padding-top: 20px;
}
.necklaces .pic6{
    grid-row: pic6-start/pic6-end;
    grid-column: pic2-start/pic2-end; 
    max-width: 70%;
    justify-self: center;
}
.necklaces .cap6{
    grid-row: cap6-start/cap6-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 20px;
}

.content .pins{
    
    grid-row: 4/5;
    
    display: grid;
    
    grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];
    
    grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;
    
    align-items: center;
    
    border-style: solid;
    border-color: black;
    border-width: 2px 0px 0px 0px;
    
}


.tall-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.square-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.side-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.pins .title{
    
    grid-row: header-start/header-end;
    grid-column: pic1-start/pic2-end;
    background-color: aliceblue;
    align-self: baseline;
    padding: 5px 2px;
    width: 100%;

}

.pins .pic1{
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    padding-top: 10px;
}
.pins .cap1{
    grid-row: cap1-start/cap1-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.pins .pic2{
    grid-row: pic2-start/pic2-end;
    grid-column: pic2-start/pic2-end;
    padding-top: 10px;
}
.pins .cap2{
    grid-row: cap2-start/cap2-end;
    grid-column: pic2-start/pic2-end;
    align-self: baseline;
    padding-top: 2px;
}
.pins .pic3{
    grid-row: pic3-start/pic3-end;
    grid-column: pic1-start/pic1-end;
}
.pins .cap3{
    grid-row: cap3-start/cap3-end;
    grid-column: pic1-start/pic1-end;
    align-self: baseline;
    padding-top: 2px;
}
.pins .pic4{
    grid-row: pic4-start/pic4-end;
    grid-column: pic2-start/pic2-end; 
}
.pins .cap4{
    grid-row: cap4-start/cap4-end;
    grid-column: pic2-start/pic2-end; 
    align-self: baseline;
    padding-top: 2px;
}
.pins .pic5{
    grid-row: pic5-start/pic5-end;
    grid-column: pic1-start/pic1-end; 
    padding-top: 30px;
}
.pins .cap5{
    grid-row: cap5-start/cap5-end;
    grid-column: pic1-start/pic1-end; 
    align-self: baseline;
    padding-top: 20px;
}
.pins .pic6{
    grid-row: pic6-start/pic6-end;
    grid-column: pic2-start/pic2-end; 
    max-width: 70%;
    justify-self: center;
}
.pins .cap6{
    grid-row: cap6-start/cap6-end;
    grid-column: pic2-start/pic2-end;  
    align-self: baseline;
    padding-top: 20px;
}



@media(min-width: 460px){
    
        
    body{
        
        grid-template-columns: 2% auto 2%;
        
    }
    
     .logo .name{
        
        font-size: 21;
        -webkit-transform:scale(1.4,1);
        
    }
    
    .grid-container .header {
        
        font-size: 18;
        
    }

    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;


    
    }

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .bracelets .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;
        justify-items: center;



    }


    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .earrings .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic13-start/pic13-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap13-start/cap13-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic17-start/pic17-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap17-start/cap17-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;



    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .pins .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .pins .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }

    
}

@media (min-width: 550px){
    
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start]auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;

    
    }

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .bracelets .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;
        justify-items: center;


    }


    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width: 85%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 30px;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .earrings .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic13-start/pic13-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap13-start/cap13-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic17-start/pic17-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap17-start/cap17-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;


    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .pins .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .pins .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }


    
}

@media (min-width: 700px){
    
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;

    
    }

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .bracelets .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start]auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;
        justify-items: center;



    }


    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .earrings .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic13-start/pic13-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap13-start/cap13-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic17-start/pic17-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap17-start/cap17-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;


    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .pins .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .pins .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 50px;
    }
    .pins .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }

    
    
}


@media (min-width: 750px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);
        
    }
    
}


@media (min-width: 775px){
    
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;

    
    }
    
    .bracelets .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .bracelets .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic2-start/pic2-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap4{
        grid-row: cap2-start/cap2-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end; 
    }
    .bracelets .cap7{
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap8{
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] 0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] 0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;
        justify-items: center;


    }
    
    .earrings .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    
    .earrings .patriots-header{
    
        grid-row: patriots-header-start/patriots-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }
    .earrings .bruins-header{

        grid-row: bruins-header-start/bruins-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .redsox-header{

        grid-row: redsox-header-start/redsox-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .celtics-header{

        grid-row: celtics-header-start/celtics-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }



    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .earrings .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .earrings .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic10{
        grid-row: pic7-start/pic7-end;
        grid-column: pic4-start/pic4-end; 
            max-height: 100%;
    }
    .earrings .cap10{
        grid-row: cap7-start/cap7-end;
        grid-column: pic4-start/pic4-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic11-start/pic11-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap11-start/cap11-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    .earrings .pic14{
        grid-row: pic11-start/pic11-end;
        grid-column: pic4-start/pic4-end; 
            max-height: 100%;
    }
    .earrings .cap14{
        grid-row: cap11-start/cap11-end;
        grid-column: pic4-start/pic4-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic16-start/pic16-end;
        grid-column: pic3-start/pic3-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap16-start/cap16-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic18{
        grid-row: pic16-start/pic16-end;
        grid-column: pic4-start/pic4-end; 
        max-height: 100%;
    }
    .earrings .cap18{
        grid-row: cap16-start/cap16-end;
        grid-column: pic4-start/pic4-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    .content .necklaces{
    

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;



    }
    
    .necklaces .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }


    .necklaces .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .necklaces .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .necklaces .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .necklaces .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .necklaces .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .necklaces .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .necklaces .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .necklaces .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .necklaces .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .necklaces .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .necklaces .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .necklaces .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }
    
    
    
    
    .content .pins{
    

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;



    }
    
    .pins .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .pins .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .pins .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }
    

    
}

@media (min-width: 850px){
    
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;

    
    }
    
    .bracelets .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .bracelets .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic2-start/pic2-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap4{
        grid-row: cap2-start/cap2-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end; 
    }
    .bracelets .cap7{
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap8{
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] 0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] 0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;
        justify-items: center;


    }
    
    .earrings .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    
    .earrings .patriots-header{
    
        grid-row: patriots-header-start/patriots-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }
    .earrings .bruins-header{

        grid-row: bruins-header-start/bruins-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .redsox-header{

        grid-row: redsox-header-start/redsox-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .celtics-header{

        grid-row: celtics-header-start/celtics-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }



    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .earrings .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .earrings .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic11-start/pic11-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap11-start/cap11-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic16-start/pic16-end;
        grid-column: pic3-start/pic3-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap16-start/cap16-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;


    }
    
    .pins .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .pins .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .pins .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }
    

    
}

@media (min-width: 1020px){
  
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;

    
    }
    
    .bracelets .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .bracelets .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic2-start/pic2-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap4{
        grid-row: cap2-start/cap2-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end; 
    }
    .bracelets .cap7{
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap8{
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] 0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] 0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;
        justify-items: center;


    }
    
    .earrings .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    
    .earrings .patriots-header{
    
        grid-row: patriots-header-start/patriots-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }
    .earrings .bruins-header{

        grid-row: bruins-header-start/bruins-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .redsox-header{

        grid-row: redsox-header-start/redsox-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .celtics-header{

        grid-row: celtics-header-start/celtics-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }



    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .earrings .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .earrings .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic11-start/pic11-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap11-start/cap11-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic16-start/pic16-end;
        grid-column: pic3-start/pic3-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap16-start/cap16-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    
        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;


    }
    
    .pins .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .pins .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .pins .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 5px;
    }
    .pins .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 5px;
    }
    
   
}

@media (min-width: 1200px){
    
    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;

    
    }
    
    .bracelets .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .bracelets .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic2-start/pic2-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap4{
        grid-row: cap2-start/cap2-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end; 
    }
    .bracelets .cap7{
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end; 
    }
    .bracelets .cap8{
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] 0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] 51vh [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] 0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;
        justify-items: center;


    }
    
    .earrings .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }
    
    .earrings .patriots-header{
    
        grid-row: patriots-header-start/patriots-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }
    .earrings .bruins-header{

        grid-row: bruins-header-start/bruins-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .redsox-header{

        grid-row: redsox-header-start/redsox-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }

    .earrings .celtics-header{

        grid-row: celtics-header-start/celtics-header-end;
        grid-column: pic1-start/pic4-end;

        text-decoration: underline; 
    }



    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .earrings .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .earrings .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic11-start/pic11-end;
        grid-column: pic3-start/pic3-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap11-start/cap11-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic16-start/pic16-end;
        grid-column: pic3-start/pic3-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap16-start/cap16-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    
        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;

        align-items: center;


    }
    
    .pins .title{
    
        grid-row: header-start/header-end;
        grid-column: pic1-start/pic4-end;
        background-color: aliceblue;
        align-self: baseline;
        padding: 5px 2px;
        width: 100%;

    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .pins .cap3{
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end; 
    }
    .pins .cap4{
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 5px;
    }
    .pins .pic6{
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 5px;
    }

}

@media (min-width: 1370px){

   

    
}

@media (min-width: 550px) and (min-height: 1000px){

    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;

    
    }

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .bracelets .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] 32vh [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;
        justify-items: center;


    }


    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;

    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 35px;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .earrings .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic13-start/pic13-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap13-start/cap13-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic17-start/pic17-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap17-start/cap17-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    
        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;


    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .pins .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .pins .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }

    
}

@media (min-width: 850px) and (min-height: 1250px){

    .content .bracelets{
    
        grid-row: 1/2;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;

    
    }

    .bracelets .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .bracelets .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .bracelets .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .bracelets .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end; 
    }
    .bracelets .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    .bracelets .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
    }
    .bracelets .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;   
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    .content .earrings{
    
        grid-row: 2/3;

        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [patriots-header-start] 5vh [patriots-header-end] 0vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [hr-start] 0vh [hr-end] 0vh [cap5-end cap6-end]  0vh [bruins-header-start] 5vh [bruins-header-end] 0vh  [pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 10vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end]  0vh [redsox-header-start] 5vh [redsox-header-end] 0vh [pic11-start pic12-start] auto [pic11-end pic12-end cap11-start cap12-start] 10vh [cap11-end cap12-end pic13-start pic14-start] auto [pic13-end pic14-end cap13-start cap14-start] 10vh [cap13-end cap14-end] 0vh [celtics-header-start] 5vh [celtics-header-end] 0vh [pic15-start pic16-start] auto [pic15-end pic16-end cap15-start cap16-start] 10vh [cap15-end cap16-end pic17-start pic18-start] auto [pic17-end pic18-end cap17-start cap18-start] 10vh [cap17-end cap18-end];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;
        justify-items: center;


    }


    .earrings .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 93%;
        max-width:90%;


    }
    .earrings .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 35px;
    }
    .earrings .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .earrings .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
    }
    .earrings .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
    }
    .earrings .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic7{
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
    }
    .earrings .cap7{
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic8{
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
    }
    .earrings .cap8{
        grid-row: cap8-start/cap8-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic9{
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap9{
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic11{
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap11{
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic12{
        grid-row: pic12-start/pic12-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 14px;
        max-height: 100%;
        max-width: 90%;
    }
    .earrings .cap12{
        grid-row: cap12-start/cap12-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic13{
        grid-row: pic13-start/pic13-end;
        grid-column: pic1-start/pic1-end; 
            max-height: 100%;
    }
    .earrings .cap13{
        grid-row: cap13-start/cap13-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }


    .earrings .pic15{
        grid-row: pic15-start/pic15-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap15{
        grid-row: cap15-start/cap15-end;
        grid-column: pic1-start/pic1-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic16{
        grid-row: pic16-start/pic16-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 100%;
    }
    .earrings .cap16{
        grid-row: cap16-start/cap16-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 2px;
    }
    .earrings .pic17{
        grid-row: pic17-start/pic17-end;
        grid-column: pic1-start/pic1-end; 
        max-height: 100%;
    }
    .earrings .cap17{
        grid-row: cap17-start/cap17-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    
    
    
    
    
    .content .pins{
    
        display: grid;

        grid-template-rows: 3vh [header-start] auto [header-end] 1.8vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 8vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 10vh [cap5-end cap6-end pic7-start pic8-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

        align-items: center;


    }


    .pins .pic1{
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        padding-top: 10px;
    }
    .pins .cap1{
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic2{
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        padding-top: 10px;
    }
    .pins .cap2{
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic3{
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .pins .cap3{
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic4{
        grid-row: pic4-start/pic4-end;
        grid-column: pic2-start/pic2-end; 
    }
    .pins .cap4{
        grid-row: cap4-start/cap4-end;
        grid-column: pic2-start/pic2-end; 
        align-self: baseline;
        padding-top: 2px;
    }
    .pins .pic5{
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end; 
        padding-top: 30px;
    }
    .pins .cap5{
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end; 
        align-self: baseline;
        padding-top: 20px;
    }
    .pins .pic6{
        grid-row: pic6-start/pic6-end;
        grid-column: pic2-start/pic2-end; 
        max-width: 70%;
        justify-self: center;
    }
    .pins .cap6{
        grid-row: cap6-start/cap6-end;
        grid-column: pic2-start/pic2-end;  
        align-self: baseline;
        padding-top: 20px;
    }

    
}