<main class="main">
   <div class="container news flow">
      <h2 class="news__title">Sign up for newsletters</h2>
      <div class="news-grid">
         <div class="card__group">
            <div class="card active">
               <input class="custom" type="checkbox" id="check1" / checked>
               <label for="check1">
                  <h5>Daily Bits</h5>
                  <p>Today’s biggest news</p>
               </label>
            </div>
            <div class="card">
               <input class="custom" type="checkbox" id="check2" />
               <label for="check2">
                  <h5>Week in Review</h5>
                  <p>The week’s biggest news</p>
               </label>
            </div>
         </div>
         <div class="card__group">
            <div class="card">
               <input class="custom" type="checkbox" id="check3" />
               <label for="check3">
                  <h5>The Exchange</h5>
                  <p>Art, money and markets</p>
               </label>
            </div>
            <div class="card">
               <input class="custom" type="checkbox" id="check4" />
               <label for="check4">
                  <h5>Event Updates</h5>
                  <p>Announcements and discounts</p>
               </label>
            </div>
         </div>
         <div class="card__group">
            <div class="card">
               <input class="custom" type="checkbox" id="check5" />
               <label for="check5">
                  <h5>Sponsorship</h5>
                  <p>Partnership insights</p>
               </label>
            </div>
            <div class="card">
               <input class="custom" type="checkbox" id="check6" />
               <label for="check6">
                  <h5>This Week in Art</h5>
                  <p>Art news of the week</p>
               </label>
            </div>
         </div>
      </div>
      <div class="news__form">
         <input type="email" placeholder="Enter your email address" />
         <button class="news__btn">Subscribe</button>
      </div>
   </div>
</main>

@import url("https://fonts.googleapis.com/css2?family=Mulish:[email protected];600;700&display=swap");

:root {
   --clr-neutral-300: hsl(232, 41%, 97%);
   --clr-neutral-400: hsl(98, 0%, 50%);
   --clr-neutral-900: #020203;

   --clr-accent: hsl(248, 66%, 66%);

   /* font weight */
   --fw-400: 400;
   --fw-600: 600;
   --fw-700: 700;

   /* Type */
   --ff-primary: "Mulish", sans-serif;
}
/*  min width 768px */
/* reset */
*,
*::before,
*::after {
   box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol[class],
ul[class] li,
figure,
figcaption,
blockquote,
dl,
dd {
   margin: 0;
}

/* Set core root defaults */
html:focus-within {
   scroll-behavior: smooth;
}

/* Set core body defaults */
body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.6;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
   text-decoration-skip-ink: auto;
}

ol[class],
ul[class] {
   list-style: none;
   padding: 0;
}

input,
button,
textarea,
select {
   font: inherit;
}

img,
picture {
   max-width: 100%;
   height: auto;
   display: block;
}

/* general layout */

.flow > * + * {
   margin-top: var(--flow-spacer, var(--spacer));
}
* {
   font-family: inherit;
   line-height: inherit;
   color: inherit;
}

html,
body {
   overflow-x: hidden;
   width: 100%;
   height: 100%;
   -webkit-tap-highlight-color: transparent;
}

body {
   min-height: 100%;
   font-family: var(--ff-primary);
   font-size: 1rem;
   font-weight: var(--fw-400);
   background: linear-gradient(119.36deg, #eceef5 0%, #e3e5fb 100%);
   color: var(--clr-neutral-900);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   -moz-font-feature-settings: "liga" on;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.main,
.container {
   width: min(95%, 1136px);
   margin: 0 auto;
}

.news {
   background-color: #fff;
   padding: 2.125em 1.25em;
   border-radius: 10px;
   box-shadow: 0px 34px 85px -25px #bbc0ea;
}
.news__title {
   font-size: 1.75rem;
   margin-bottom: 1.5em;
}

.news-grid {
   display: grid;
}

.custom {
   opacity: 0;
   position: relative;
}

.custom + label {
   display: grid;
   grid-template-columns: 24px auto;
   grid-template-rows: auto auto;
   align-items: center;
   column-gap: 1em;
   position: relative;
   cursor: pointer;
}

.custom[type="checkbox"] + label::before {
   content: "";
   width: 24px;
   height: 24px;
   border-radius: 3px;
   border: 1px solid #8f94a1;
   background: transparent;
}

.custom[type="checkbox"] + label::after {
   content: "\2713";
   color: white;
   font-size: 1.25rem;
   position: absolute;
   top: 0px;
   left: 4px;
   transform: scale(0);
   transition: all 300ms ease-in-out;
}

.custom[type="checkbox"]:checked + label::before {
   background-color: var(--clr-accent);
}

.custom[type="checkbox"]:checked + label::after {
   transform: scale(1);
}

h5 {
   font-size: 1.25rem;
   white-space: nowrap;
}

p {
   grid-column: 2/ -2;
}
.card {
   padding: 0 12px;
}
.card.active {
   background-color: var(--clr-neutral-300);

   height: 88px;
   width: 100%;
}

// ======= form
.news__form {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-top: 30px;
}

input[type="email"] {
   border: 0;
   outline: 0;
   padding: 20px 30px;
   border-radius: 3px;
   border: 1px solid #8f94a1;
}

.news__btn {
   border: none;
   outline: none;
   background: transparent;
   background-color: var(--clr-accent);
   padding: 20px 30px;
   color: white;
   border-radius: 3px;
   cursor: pointer;
}

@media (min-width: 550px) {
   .news-grid {
      grid-auto-flow: column;
      grid-template-columns: repeat(3, 1fr);
   }
   .news {
      padding: 4.125em 2.25em;
   }
   .news__form {
      flex-direction: row;
      gap: 10px;
   }
   input[type="email"] {
      flex: 0 0 480px;
   }
}