@import url("blog-archive.css");

.classroom-page{font-family:Arial,Helvetica,sans-serif;color:#0a2146;letter-spacing:0}
.classroom-shell{width:min(1400px,calc(100% - 48px));margin-inline:auto}
.classroom-hero{min-height:470px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(4,25,59,.96),rgba(8,53,118,.78) 54%,rgba(16,96,229,.18)),url("../../../../uploads/2022/03/MG_0280-scaled.jpg") center 42%/cover no-repeat;border-bottom:5px solid #64dfcc}
.classroom-hero-copy{width:min(650px,58%);padding:48px 50px;border:1px solid rgba(255,255,255,.17);border-left:5px solid #64dfcc;border-radius:7px;background:rgba(5,31,70,.82);box-shadow:0 24px 58px rgba(3,20,48,.32);color:#fff}
.classroom-eyebrow{margin:0 0 12px;color:#0d5fe8;font-size:13px;font-weight:800;text-transform:uppercase}
.classroom-hero .classroom-eyebrow{color:#70e4d3}
.classroom-hero h1{margin:0;color:#fff;font-size:clamp(50px,6vw,82px);line-height:1;font-weight:800}
.classroom-hero-copy>p:last-child{max-width:530px;margin:20px 0 0;color:#e7f1ff;font-size:18px;line-height:1.6}
.classroom-gallery{padding:72px 0 82px;background:linear-gradient(120deg,#f3f7fd 0%,#fff 52%,#e9faf6 100%);border-bottom:5px solid #0d62ea}
.classroom-heading{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(420px,1fr);align-items:end;gap:60px;margin-bottom:36px}
.classroom-heading h2{margin:0;color:#071d40;font-size:clamp(38px,4.2vw,58px);line-height:1.05;font-weight:800}
.classroom-heading>p{max-width:680px;margin:0 0 5px;color:#53647a;font-size:17px;line-height:1.65}
.classroom-grid{display:grid;grid-template-columns:1.22fr .78fr;grid-template-rows:repeat(2,265px);gap:16px}
.classroom-shot{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid #c9daed;border-radius:7px;background:#dfe9f6;box-shadow:0 16px 36px rgba(7,37,81,.11)}
.classroom-shot-featured{grid-row:1/3}
.classroom-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.classroom-shot-featured img{object-position:center 45%}
.classroom-shot:hover img{transform:scale(1.025)}
.classroom-shot::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(3,22,51,.88));pointer-events:none}
.classroom-shot figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;display:flex;align-items:center;gap:14px;color:#fff}
.classroom-shot figcaption>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:linear-gradient(135deg,#64dfcc,#1b93ee);color:#062451;font-size:12px;font-weight:900}
.classroom-shot strong,.classroom-shot small{display:block}
.classroom-shot strong{font-size:18px;line-height:1.2}
.classroom-shot small{margin-top:3px;color:#dbe9fa;font-size:12px;line-height:1.35}

@media(max-width:900px){.classroom-hero{min-height:430px}.classroom-hero-copy{width:min(650px,78%)}.classroom-heading{grid-template-columns:1fr;gap:15px}.classroom-grid{grid-template-columns:1fr 1fr;grid-template-rows:370px 250px}.classroom-shot-featured{grid-column:1/3;grid-row:auto}}
@media(max-width:650px){.classroom-shell{width:calc(100% - 28px)}.classroom-hero{min-height:calc(100svh - 162px);background-position:58% center}.classroom-hero-copy{width:100%;padding:29px 23px}.classroom-hero h1{font-size:46px}.classroom-hero-copy>p:last-child{font-size:15px}.classroom-gallery{padding:48px 0 56px}.classroom-heading{margin-bottom:25px}.classroom-heading h2{font-size:36px}.classroom-heading>p{font-size:15px}.classroom-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:14px}.classroom-shot,.classroom-shot-featured{grid-column:auto;grid-row:auto;height:auto;aspect-ratio:4/3}.classroom-shot-featured{aspect-ratio:4/3}.classroom-shot figcaption{left:16px;right:16px;bottom:15px}.classroom-shot strong{font-size:16px}}
